属性操作 · 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'; ~~~