Question

我很尴尬地承认我找不到使用Javascript修改CSS属性的符合标准的方法。或者至少，我假设如此，原因如下：

以下代码在没有DOCTYPE声明的Firefox / WebKit中正常工作，但不适用于指定的doctype（HTML 4或5）：

function setWindowSize(width, height)   {
    console.log("Syncing dimensions:",width,height);            // prints correct values
    var container = document.getElementById('canvasProxy');
    console.log(container);                                     // prints valid element
    console.log(container.style);                               // prints valid object
    container.style['width'] = width;
    container.style['height'] = height;
    console.log(container.style['width'], container.style['height']); // prints empty values
}

其中canvas proxy简单地定义为：

<div id="canvasProxy"></div>

并没有与之相关的风格。上面的代码直到DOM加载后才会执行。

style.setProperty和style.getPropertyCSSValue也无法正常工作。所以呃......什么是正确的形式？我疯了吗？

（我打赌jQuery可以处理这个问题，但在这种特殊情况下，我试图将页面大小保持在绝对最小值。）

Answer 1

您没有说明您传递的是什么值，或者您认为哪些值是正确的，但我会很高兴您传递整数而不是长度

CSS需要长度为0的单位。大多数浏览器将执行错误恢复（与CSS规范直接矛盾）并假设您指的是px如果您未指定单位...但仅在Quirks模式下。

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('canvasProxy').css('width', 300);
    $('canvasProxy').css('height', 50);
</script>

使用javascript设置css属性不能在严格模式下工作？

2 个答案: