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

Question

在javascript中使用是否有任何区别

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

和

element.style.width = '150px';

？

我已经看到关键字不能用第一种方式(像这样),但对于非关键字属性是否有区别？

Answer 1

两者都完全有效.你能举出一些不能用于第二种方式的例子吗？您是否知道属性名必须遵循驼峰格式第一？例如,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大小.