javascript如何修改元素屬性

這篇文章將為大家詳細講解有關javascript如何修改元素屬性，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

js修改元素屬性的方法：1、使用“元素對象.setAttribute('屬性','屬性值')”語句；2、使用“元素對象.style.屬性名='屬性值'”語句；3、使用“元素對象.style.cssText='屬性名:屬性值;'”語句。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript修改元素的屬性

方法1：使用setAttribute()

setAttribute() 方法添加指定的屬性，并為其賦指定的值。如果這個指定的屬性已存在，則僅設置/更改值。

語法：元素對象.setAttribute('屬性','屬性值');

示例：

<div>hello</div> 
<div id="box">歡迎來到億速云！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.setAttribute('style','color:red;border:1px solid #008000');
	// 給box元素設置的是行內樣式
</script>

方法2：直接通過元素節點的style對象修改

語法：元素對象.style.屬性名='屬性值';

示例：

<div>hello</div> 
<div id="box">歡迎來到億速云！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.color='#fff';
	box.style.backgroundColor='#ff6c8c';
	box.style.padding='10px';
</script>

方法3：使用cssText 屬性

語法：元素對象.style.cssText='屬性名:屬性值;';

示例：

<div>hello</div> 
<div id="box">歡迎來到億速云！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.cssText='color:#fff;background-color:#ffaa00;padding:10px;';
</script>

關于“javascript如何修改元素屬性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。