JS 修改元素屬性的六種方式

方式一、

1.setattribute

描述：設定元素的【屬性】
語法：元素名.setattribute('屬性','屬性值');
例子：box.setattribute('style','background-color:red;height:400px');
注意：設定的是行內樣式
2.getattribute
描述：獲取屬性值
語法：元素名.getattribute('屬性名')；
例子：console.log(box.getattribute('style'));//background-color:red;height:300px
注意：只能獲取行內樣式
3.removeattribute()
描述：刪除乙個屬性
語法：元素名.removeattribute('屬性名');
例子：box.removeattribute('style');

2.1直接通過元素節點的style物件修改

2.1.1獲取css樣式
語法：元素名.style.樣式名
例子：console.log(box.style.backgroundcolor);//red
2.1.2設定css樣式
語法：元素名.style.樣式名
例子：var box = document.queryselector('.box');
box.style.height=300+'px';
box.style.width=300+'px';
box.style.backgroundcolor='red';
box.style.cssfloat = 'left';
注意：1.只能操作行內樣式
2.當設定的樣式含有單位時 則必須+單位
3.如果樣式是js中的關鍵字 則需要在樣式前+css
4.如果樣式由下劃線連線 則需要去掉下劃線將後面的單詞首字母變為大寫
2.1.3清除樣式
語法：元素名.style=''
例子：box.style='';//null 都可以的

3.1設定樣式

語法：通過元素名.style.csstext;
例子：box.style.csstext='background-color:red;height:300px;width:300px';
3.2獲採樣式
語法：元素名.style.csstext
console.log(box.style.csstext);//background-color: red; height: 300px; width: 300px;
3.3清除樣式
語法：元素名.style.csstext = '';
例子：box.style=null;
注意：只能讀寫行內樣式

4.1設定樣式

語法：通過元素名.style.setproperty();
例子：box.style.setproperty('background-color','red');
box.style.setproperty('height','100px');
4.2獲採樣式值
語法：元素名.style.getpropertyvalue('樣式名')
console.log(box.style.getpropertyvalue('width'));
4.3清除樣式
語法：元素名.style.removeproperty('樣式名');
box.style.removeproperty('height');

五、關聯內部樣式/外部樣式

1.1setattribute('屬性名'，'屬性值')

描述：關聯內部樣式
語法：setattribute('屬性名'，'屬性值');
注意：1.可以追加自定義屬性的
div.setattribute('a','box');
2.多次對乙個屬性設定值 則最後一次生效
var div = document.queryselector('div');
div.setattribute('class','a');
div.setattribute('class','box');
1.2removeattribute  刪除【屬性】
div.removeattribute('class');
例子：var div = document.queryselector('div');
div.setattribute('class','a');
div.setattribute('class','box');
div.removeattribute('class');

六、關聯內部樣式/外部樣式

1 classname

描述：設定元素的類及其值
語法：元素名.classname
例子：var div = document.queryselector('div');
div.classname = 'box';
注意：當乙個屬性多次被賦值則最後一次賦值有效
div.classname = 'a';
div.classname = 'box';//有效
2清除類名
div.classname='';

通過js修改元素html屬性

獲取元素物件 var title document.getelementbyid title 通過style屬性修改樣式,在css中樣式名是通過 分隔,在js中,樣式名要用駝峰命名法 title.style.fontsize 20px textcontent和innerhtml屬性都用於修改元素的內...

js實現繼承的六種方式

原型鏈利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式，原型，例項之間的關係 每個建構函式都有乙個原型物件，原型物件包含乙個指向建構函式的指標，而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype.g...

js 實現繼承的六種方式

原型鏈 利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式，原型，例項之間的關係 每個建構函式都有乙個原型物件，原型物件包含乙個指向建構函式的指標，而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype....