當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript属性操作
生活随笔
收集整理的這篇文章主要介紹了
JavaScript属性操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇文章主要是介紹JavaScript 對HTML 屬性的讀寫操作方法。。。
JS 屬性讀操作
js 讀取html的屬性是通過 . 來操作的，具體語法如下
元素.屬性名
問題1：
如何獲取input標簽里面填寫的內容？點擊按鈕彈出id為text1 的input輸入框中的內容。。。
<input id="text1" type="text" /> <select id="select1"><option value="北京">北京</option><option value="上海">上海</option><option value="杭州">杭州</option> </select> <input id="btn1" type="button" value="按鈕" />思路：
獲取根據id 獲取按鈕和輸入框
當按鈕點擊時，彈出輸入框中的內容
代碼：
var oBtn = document.getElementById('btn1'); var oText = document.getElementById('text1');oBtn.onclick = function (){alert( oBtn.value ); // '按鈕'alert( oText.value ); // 輸入的內容alert( oSelect.value ); // 下拉選擇的內容 };屬性的寫操作
js操作屬性的寫就是給屬性賦予新的值的過程。。。屬性的寫操作只是對屬性值得替換，修改，并不是真正的添加操作。。。
元素.屬性名 = 新值
問題2
點擊按鈕改變按鈕上顯示的文字？點擊按鈕向input框中寫入下拉選項中選中的文字？？
代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</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讀寫操作
讀操作
獲取元素內所有HTML的內容 （包括內容和html標簽）
元素.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>的文字 };寫操作
修改元素內所有html內容
元素.innerHTML = ''
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</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>綜合實例
點擊按鈕讓頁面文字改變大小
js 修改元素屬性的時候屬性名稱中不能包含 - 因此屬性名稱都應寫成駝峰命名的樣子 例如： 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天的里約奧運會終于在近日落下帷幕，但被載入史冊的偉大運動員永不褪色。這其中，博爾特百米3冠王、奧運9金的成績足以讓他成為里約最耀眼的巨星之一。</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 修改標簽class
class 是js 中的保留字 所以JavaScript在操作 class 屬性的時候 應寫成 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天的里約奧運會終于在近日落下帷幕，但被載入史冊的偉大運動員永不褪色。這其中，博爾特百米3冠王、奧運9金的成績足以讓他成為里約最耀眼的巨星之一。</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>更多內容可以點擊查看：http://weber.pub/
總結
以上是生活随笔為你收集整理的JavaScript属性操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： STL中的查找算法
- 下一篇： gradle idea java ssm