Question

在javascript中使用

之间有什么区别

element.style.setAttribute('width', '150px');

和

element.style.width = '150px';

？

我已经看到关键字无法使用第一种方式（如this），但对于非关键字属性是否存在差异？

Answer 1

两者都完全有效。你能举出一些不能用于第二种方式的例子吗？您是否知道属性名称需要首先 camelcased ？例如。 element.style.marginTop而不是element.style.margin-top错误。连字符是Javascript中的无效标识符。

Answer 2

我见过的唯一变化是画布。但是，给出一个元素

之间的区别

element.width = '100px'
element.style.width = '100px'
element.setAttribute('width','100px')
element.style.setAttribute('width','100px')

由于我没有从专家那里找到答案，只有经验才会说出来。

width是元素的公开属性，如对象car.color ='red'; setAttribute('color','red')是一个将值赋值给属性的函数在car = {color:'red',setAttribue:function(prop,val){this[prop]=val;} 看作函数原型将是

function element(){
   this.color='blue' // default
   this.setAttribute = function(prop, val){ this[prop]=val;}
}
car = new element()

car.color = 'red';
or
car.setAttribute('color','red');

现在，风格是一个特殊情况，让我们说，就是如何以变换的方式显示事物，不是它的原创。样式不会改变属性本身，这就是效果你现在在画布中看到，就像之前在宽度高度值太高的图像中一样

那是怎么回事？想象你有一个100x100像素的原始图形，图形标记它会有高度宽度100x100px的设置，（与画布相同）然后按样式，您将宽度高度更改为200x200px，相同的图像将增长到适合新尺寸，将被放大，但图像本身仍然是100x100

好的，您可以对此进行测试，以便您对解释

感到满意

有图片

<image id='f' src='whateveritis' width=100 height=100>

看到了吗？是100x100px

现在添加样式

 style='width:200px'

<image id='f' style='width:200px' src='whateveritis' width=100 height=100>

看到了吗？现在它被放大了

现在获取其属性

f = document.getElementById('f');

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 100px

所以请记住使用图像，画布全部，不要在样式中使用大小，而是在属性

中

div的默认大小或其他为零

然后您可以按样式设置其大小，但实际上大小仍为0x0px

但是大多数时候程序会根据属性值工作，不是风格值。

而且，还有另一项措施，但将是你的作业

那么f.scroolWidth和f.scrollHeight是什么，如果它是相同的宽度和高度（当然不滚动时）。

最后一点需要考虑即使我用汽车做了例子，它也与元素不同因为属性颜色是隐藏的，但可以访问样式也就是说，元素的唯一属性就是你编写的属性直接在html标记代码中或使用setAttribute设置的代码因为即使你修改了

element.width是一种不是属性本身的样式

所以真正改变其价值的唯一方法是

element.setAttribute（'width'，x）

我自己读了这个，发现了另一个问题你可能会想，我把html标签留下了100x100，这就是我得到的原因 100而不是200的警报

嗯，事实并非如此

您也可以测试，不要更改标签

命令f.setAttribute（'width'，'300'）;

然后

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 300px

在JQuery中

是相同的，更改属性的唯一命令是$（）。attr

$（）。widht和$（）。css只需更改样式

最后

重要吗？

是的，是的，因为即使图像和画布使用属性也不是风格，视觉效果的风格是风格而不是属性也就是说，您可以将原始大小设置为200x200，这将是200x200 但如果您按样式更改为300x300，则图像将为300 从那时起，无论你将其属性设置为1000x1000，图像仍然是被视为300x300 但是，例如，对于画布程序，它正在处理的图像是1000x1000大小。

Answer 3

设置多个CSS值，最快的就是使用

el.setAttribute('style','LIST-OF-STYLES');

要使用“推荐”样式对象，它必须是

el.style.ST1 = 'VA1';
el.style.ST2 = 'VA2';
...

还有 el.style.setAttribute，但这更加冗长，应该只对 Java 开发人员有吸引力。

element.setAttribute（'style'，'attribute：value;'）与element.attribute ='value'

3 个答案: