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/

使用javascript访问外部CSS

3 个答案: