Javascript element.setAttribute（'；style'；，'；attribute:value；'；）与element.attribute='；价值'；

在javascript中，使用

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

及

?

---

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

两者都是完全有效的。你能举一些用第二种方法不起作用的例子吗？您是否知道属性名需要先用大小写？例如，

element.style.marginTop

而不是不正确的

element.style.marginTop

。连字符在Javascript中是一个无效的标识符。

我看到的唯一变化是画布。那么，给定一个元素，它们之间的区别是什么呢

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

因为我还没有从专家那里找到答案，所以我只能凭经验说出来

宽度是元素的一个暴露属性，如在对象car中

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>

因此，请记住，使用图像、画布和all时，不要以样式为基础，而是以属性为基础

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，这就是为什么我 警报由200改为100

嗯，不是，不是这样的

您也可以为此进行测试，不要更改标记

命令一个f.setAttribute（'width'，'300'）

然后

在JQuery中，更改属性的唯一命令是$（）.attr

$（）.widt和$（）.css只需更改样式

最后

重要吗

是的，它是，因为即使对于图像和画布，使用的是属性而不是 样式，具有视觉效果的是样式而不是属性 也就是说，您可以将原始大小设置为200x200，这将是200x200 但如果您将样式更改为300x300，则图像将为300 从那时起，无论您将其属性设置为1000x1000，图像仍将保持不变 被视为300x300

---

但例如，对于画布程序，它正在处理的图像大小为1000x1000。

要设置多个CSS值，最快的方法是使用

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

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

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

---

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

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

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

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

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

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