當(dāng)前位置：
首頁 >
JavaScript属性操作
發(fā)布時(shí)間：2025/4/16
52
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JavaScript属性操作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本篇文章主要是介紹JavaScript 對(duì)HTML 屬性的讀寫操作方法。。。
JS 屬性讀操作
js 讀取html的屬性是通過 . 來操作的，具體語法如下
元素.屬性名
問題1：
如何獲取input標(biāo)簽里面填寫的內(nèi)容？點(diǎn)擊按鈕彈出id為text1 的input輸入框中的內(nèi)容。。。
<input id="text1" type="text" /> <select id="select1"><option value="北京">北京</option><option value="上海">上海</option><option value="杭州">杭州</option> </select> <input id="btn1" type="button" value="按鈕" />思路：
獲取根據(jù)id 獲取按鈕和輸入框
當(dāng)按鈕點(diǎn)擊時(shí)，彈出輸入框中的內(nèi)容
代碼：
var oBtn = document.getElementById('btn1'); var oText = document.getElementById('text1');oBtn.onclick = function (){alert( oBtn.value ); // '按鈕'alert( oText.value ); // 輸入的內(nèi)容alert( oSelect.value ); // 下拉選擇的內(nèi)容 };屬性的寫操作
js操作屬性的寫就是給屬性賦予新的值的過程。。。屬性的寫操作只是對(duì)屬性值得替換，修改，并不是真正的添加操作。。。
元素.屬性名 = 新值
問題2
點(diǎn)擊按鈕改變按鈕上顯示的文字？點(diǎn)擊按鈕向input框中寫入下拉選項(xiàng)中選中的文字？？
代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> <script> window.onload = function (){var oBtn = document.getElementById('btn1');var oText = document.getElementById('text1');var oSelect = document.getElementById('select1');oBtn.onclick = function (){oBtn.value = 'button';oText.value = oSelect.value;}; }; </script> </head> <body> <input id="text1" type="text" /> <select id="select1"><option value="北京">北京</option><option value="上海">上海</option><option value="杭州">杭州</option> </select> <input id="btn1" type="button" value="按鈕" /> </body> </html>innerHTML讀寫操作
讀操作
獲取元素內(nèi)所有HTML的內(nèi)容 （包括內(nèi)容和html標(biāo)簽）
元素.innerHTML
<input id="btn1" type="button" value="按鈕" /> <p id="p1">這是一些<b>加粗</b>的文字</p> var oBtn = document.getElementById('btn1'); var oP = document.getElementById('p1');oBtn.onclick = function (){alert( oP.innerHTML ); // 這是一些<b>加粗</b>的文字 };寫操作
修改元素內(nèi)所有html內(nèi)容
元素.innerHTML = ''
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> <script> window.onload = function (){var oBtn = document.getElementById('btn1');var oText = document.getElementById('text1');var oP = document.getElementById('p1');oBtn.onclick = function (){oP.innerHTML = oText.value; // 替換p里面所有的html代碼}; }; </script> </head> <body> <input id="text1" type="text" /> <input id="btn1" type="button" value="按鈕" /> <p id="p1">這是一些文字</p> </body> </html>綜合實(shí)例
點(diǎn)擊按鈕讓頁面文字改變大小
js 修改元素屬性的時(shí)候?qū)傩悦Q中不能包含 - 因此屬性名稱都應(yīng)寫成駝峰命名的樣子 例如： font-size -> fontSize
<input id="btn1" type="button" value="-"> <input id="btn2" type="button" value="+"> <p id="font" style="font-size: 18px;width: 300px">為期17天的里約奧運(yùn)會(huì)終于在近日落下帷幕，但被載入史冊(cè)的偉大運(yùn)動(dòng)員永不褪色。這其中，博爾特百米3冠王、奧運(yùn)9金的成績(jī)足以讓他成為里約最耀眼的巨星之一。</p> <script>var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var oFont = document.getElementById('font');var fontSize = 18;oBtn1.onclick = function () {fontSize --;oFont.style.fontSize = fontSize + 'px';};oBtn2.onclick = function () {fontSize ++;oFont.style.fontSize = fontSize + 'px';}; </script>JavaScript 修改標(biāo)簽class
class 是js 中的保留字 所以JavaScript在操作 class 屬性的時(shí)候 應(yīng)寫成 className
<style>.red {color:red;background: yellow}.yellow{color:yellow;background: red;} </style> <input id="btn1" type="button" value="-"> <input id="btn2" type="button" value="+"> <input id="btn3" type="button" value="red"> <input id="btn4" type="button" value="yellow"> <p id="font" style="font-size: 18px;width: 300px">為期17天的里約奧運(yùn)會(huì)終于在近日落下帷幕，但被載入史冊(cè)的偉大運(yùn)動(dòng)員永不褪色。這其中，博爾特百米3冠王、奧運(yùn)9金的成績(jī)足以讓他成為里約最耀眼的巨星之一。</p> <script>var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var oBtn3 = document.getElementById('btn3');var oBtn4 = document.getElementById('btn4');var oFont = document.getElementById('font');var fontSize = 18;oBtn1.onclick = function () {fontSize --;oFont.style.fontSize = fontSize + 'px';};oBtn2.onclick = function () {fontSize ++;oFont.style.fontSize = fontSize + 'px';};oBtn3.onclick = function () {oFont.className = 'red';};oBtn4.onclick = function () {oFont.className = 'yellow';}; </script>更多內(nèi)容可以點(diǎn)擊查看：http://weber.pub/
總結(jié)
以上是生活随笔為你收集整理的JavaScript属性操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： STL中的查找算法
- 下一篇： 【持久化框架】SpringMVC+Spr