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

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

提问by rosscj2533

In javascript is there any difference between using

在javascript中使用有什么区别

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

and

和

element.style.width = '150px';

?

?

I have seen that keywords won't work with the first way (like this), but for non-keyword attributes is there a difference?

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

采纳答案by BalusC

Both are perfectly valid. Can you give some examples which doesn't work in second way? Are you aware that attribute names needs to be camelcasedfirst? E.g. element.style.marginTopinstead of incorrectly element.style.margin-top. The hyphen is namely an invalid identifier in Javascript.

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

回答by Avenida Gez

The only change I have seen is with canvas. But, then, given an element what is difference between

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

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

Since I have not found the answer from an expert, only by experience I will say this.

由于没有从高手那里找到答案，只能凭经验说这个了。

width is an exposed property of the element, as in an object car.color='red'; setAttribute('color','red')is a function which assigns the value to a property as in car = {color:'red',setAttribue:function(prop,val){this[prop]=val;}Seen as a function prototype would be

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');

Now, the style is a special case, where lets say, is how things are displayed in a transformed way, not its original. A style will not change the property itself and that is the effect you see now in canvas, as it was before in images which have too a width height value

现在，样式是一种特殊情况，可以说，是事物如何以转换的方式而不是其原始方式显示。样式不会改变属性本身，这就是您现在在画布中看到的效果，就像之前在宽高值过大的图像中一样

How is that? imagine you have a figure of 100x100 pixel original, the figure tag would have settings in it for height width 100x100px, (same case with canvas) then by style you change the width height to 200x200px the same image will grow to fit the new size, will be amplified, but the image itself stills 100x100

那个怎么样？假设您有一个 100x100 像素的原始图形，图形标签将在其中设置高度宽度为 100x100px 的设置，（与画布相同）然后通过样式将宽度高度更改为 200x200px，相同的图像将增长以适应新的尺寸，将被放大，但图像本身仍然是 100x100

Ok, you can test this so you be confortable with the explanation

好的，您可以对此进行测试，以便您对解释感到满意

have an image

有一个形象

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

See it? is 100x100px

看见？是 100x100 像素

Now add an style

现在添加样式

 style='width:200px'

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

See it? now it is amplified

看见？现在它被放大了

Now get its attributes

现在获取它的属性

f = document.getElementById('f');

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

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

So remember working with images, canvas an all, do not base size in styles, but in attributes

所以请记住处理图像、画布等，不要以样式为基础大小，而要以属性为基础

The default size of a div or whatever is zero

div 的默认大小或任何为零

then you may set its size by styles, but the size in fact remain 0x0px

那么你可以通过样式设置它的大小，但大小实际上保持0x0px

But most of the time programs will work based on attributes values, not in styles values.

但是大多数时候程序将基于属性值而不是样式值来工作。

And, there is another measure, but will be your homework

而且，还有另一个措施，但将是你的功课

Then what is the f.scroolWidth, and f.scrollHeight if it is the same as width and height (when not scrolling of course).

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

One final point to take into account Even when I did the example with car, it is different with elements since the property color is hidden but accesible to styles This is, the only real property of an element is the one you write direct in the html tag code or the one you set with setAttribute because even if you modify

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

element.width is a style not the attribute itself

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

so the only way to really change its value will be

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

element.setAttribute('width', x )

element.setAttribute('宽度', x )

I did read this myself and found another question you may have you may think, I left the html tag with 100x100 and that is why I get the alert with 100 instead 200

我自己读过这篇文章，发现了另一个你可能会想到的问题，我将 html 标签保留为 100x100，这就是为什么我收到警报的原因是 100 而不是 200

Well, not that is not the case

好吧，事实并非如此

You can test too for that, do not change the tag as it is

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

command a f.setAttribute('width','300');

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

then

然后

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

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

in JQuery is the same, the only command to change the attribute is $().attr

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

$().widht and $().css just change the style

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

Finally

最后

Is it important?

那很重要么？

Yes, it is, because even when for images and canvas work with the Attribute not the style, the one which takes visual effect is the style not the attribute This is, you can set the original size to 200x200 and this will be 200x200 but if you change by style to 300x300 the image will be 300 from then on no matter if you set its attribute to 1000x1000, the image will still be seen as 300x300 But for example, for a canvas program the image it is working on is a 1000x1000 size.

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