element.setAttribute('style', 'attribute :value;') vs. element.attribute = 'value'答案

【问题标题】：element.setAttribute('style', 'attribute :value;') vs. element.attribute = 'value'element.setAttribute('style', 'attribute :value;') vs. element.attribute = 'value'
【发布时间】：2010-12-24 22:49:48
【问题描述】：

在javascript中使用有什么区别

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

和

element.style.width = '150px';

？

我已经看到关键字不适用于第一种方式（如this），但对于非关键字属性有区别吗？

【问题讨论】：

标签： javascript html internet-explorer safari

【解决方案1】：

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

【讨论】：

我就是这么想的。抱歉，我对关键字不起作用的部分感到困惑，将更新以修复。问题是第一种方法在 Safari 中不起作用，所以我想确保第二种方法适用于 IE 和 Safari。

【解决方案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>

看到了吗？是 100x100 像素

现在添加一个样式

 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.scrollWidth是什么，如果和f.scrollHeight一样的话宽度和高度（当然不滚动时）。

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

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

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

element.setAttribute('width', x )

我自己读过这篇文章，发现了另一个你可能有的问题你可能会想，我留下了 100x100 的 html 标签，这就是我得到的原因用 100 代替 200 的警报

好吧，事实并非如此

您也可以对此进行测试，不要按原样更改标签

命令一个 f.setAttribute('width','300');

然后

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

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

在JQuery中也是一样，唯一改变属性的命令就是$().attr

$().widht 和 $().css 只是改变样式

终于

重要吗？

是的，是的，因为即使图像和画布使用 Attribute 而不是样式，具有视觉效果的是样式而不是属性也就是说，您可以将原始尺寸设置为 200x200，这将是 200x200 但是如果您将样式更改为 300x300，则图像将为 300 从此以后不管你把它的属性设置为1000x1000，图片还是会被视为 300x300 但是例如，对于一个画布程序，它正在处理的图像是 1000x1000 大小。

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：