javascript - 使用 javascript 访问外部 CSS

Question

JS：

var layer1 = document.getElementById('layer1');
ctx1 = layer1.getContext('2d'); 
layer1.style.zIndex=z1; //it is not working in my case

CSS：

canvas#layer1 { 
z-index: 3;}

如何访问这个外部 CSS，以及改变 z-index 的值。

---

我的错：

layer1.style.zIndex=cellValue; //不是 layer1.style.zIndex=z1; :)

Answer 1

尝试：

document.getElementById("layer1").style.zIndex = 3;

注意：当你必须处理被分割的属性时，你必须在 JavaScript 中使用 CamelCase 样式-

Answer 2

var canvas=document.getElementById('layer1');
canvas.styles.zIndex=anyIntegerValue

Answer 3

这是一种只注入 CSS 规则而不固定在引用中定位它们的通用方法。适用于所有浏览器。

function css_add_inline( css_code ) {
    var div = document.createElement( "div" );
    div.innerHTML = "<p>x</p><style>" + css_code + "</style>";
    document.body.appendChild(div.childNodes[1]);
}

css_add_inline( "#layer1 { z-index: 3 !important }" );

看到这个东西在行动： http: //pp19dd.com/2012/01/add-inline-css-or-remote-css-file-with-javascript/