屬性操作 · web前端

[TOC] # 屬性操作 ## 非表單元素的屬性 href、title、id、src、className ~~~ var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic.src); ~~~ * innerHTML和innerText ~~~ // innerHTML 獲取內容的時候，如果內容中有標簽，會把標簽頁獲取到 // 原封不動把內容獲取到 console.log(box.innerHTML); // innerText 獲取內容的時候，如果內容中有標簽，會把標簽過濾掉 // innerText 會把前后的換行和空白都去掉 console.log(box.innerText); ~~~ \- HTML轉義符 ~~~ " " ' ' & & < < // less than 小于 > > // greater than 大于空格   ? © ~~~ * innerText的兼容性處理 ~~~ var box = document.getElementById('box'); console.log(getInnerText(box)); // 處理innerText的兼容性問題 function getInnerText(element) { // 判斷當前瀏覽器是否支持元素的innerText屬性，支持innerText 使用element.innerText獲取內容 // 如果不支持innerText屬性，使用element.textContent獲取內容 if (typeof element.innerText === 'string') { return element.innerText; } else { return element.textContent; } } ~~~ ## 表單元素屬性 * value 用于大部分表單元素的內容獲取(option除外) * type 可以獲取input標簽的類型(輸入框或復選框等) * disabled 禁用屬性 * checked 復選框選中屬性 * selected 下拉菜單選中屬性 ~~~ <body> <input type="button" value="按鈕" id="btn" /> <input type="button" value="設置文本框的值" id="btn1" /> <br> <input type="text" id="txt" value="123" /> </body> <script> var btn = document.getElementById('btn'); btn.onclick = function () { var txt = document.getElementById('txt'); console.log(txt.value); console.log(txt.type); console.log(txt.disabled); txt.disabled = true; } var btn1 = document.getElementById("btn1"); btn1.onclick = function () { var txt = document.getElementById('txt'); txt.value = 'hello world'; } </script> ~~~ # 自定義屬性操作 * getAttribute() 獲取標簽行內屬性 * setAttribute() 設置標簽行內屬性 * removeAttribute() 移除標簽行內屬性 * 與element.屬性的區別: 上述三個方法用于獲取任意的行內屬性 ~~~ <body> <div id="box" age="18" personId="1">張三</div> </body> <script> var box = document.getElementById('box'); // 獲取自定義屬性的值 getAttribute() // console.log(box.getAttribute('age')); // console.log(box.getAttribute('personId')); // 設置自定義屬性 // box.setAttribute('sex', 'male'); // box.setAttribute('class', 'test'); // 移除屬性 box.removeAttribute('age'); box.removeAttribute('id'); </script> ~~~ # 樣式操作 * 使用style方式設置的樣式顯示在標簽行內 ~~~ var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red'; ~~~ * 注意通過樣式屬性設置寬高、位置的屬性類型是字符串，需要加上px # 類名操作 * 修改標簽的className屬性相當于直接修改標簽的類名 ~~~ var box = document.getElementById('box'); box.className = 'show'; ~~~