js 操作属性,操作内容,
disable=“disable” 让按钮变得不可选
先建一个按钮,让class = ’btn‘
然后,
添加,修改属性
document.getElementsByClassName('btn')[0].onclick = function(){
this.setAttribute('disabled'='disabled'); 第一个空填要修改的属性,第二个填要属性的值
}
如果属性里没有要添加的属性,就会把填写的属性添加进去,如果有就会覆盖。
<body> <input type="button" class="a1" id="b1" value="按钮"></input> </body> </html> <script type="text/javascript"> document.getElementsByClassName('a1')[0].onclick = function () { this.setAttribute('disabled','disabled'); } </script> //点击一下按钮,按钮就变成不可选择
获取这个属性的值,如果没有就返回null。
this.getAttribute('属性')
<body> <input type="button" class="a1" id="b1" value="按钮" disabled="disabled" ></input> <input type="button" class="a1" id="b2" value="按钮2" aa="1111"></input> </body> </html> <script type="text/javascript"> document.getElementsByClassName('a1')[1].onclick = function () { var gg = this.getAttribute('aa'); alert(gg); } </script> //获取按钮2里面属性aa的值
this.removeAttribute('属性名') 删除属性
<body> <input type="button" class="a1" id="b1" value="按钮" disabled="disabled"></input> <input type="button" class="a1" id="b2" value="按钮2" ></input> </body> </html> <script type="text/javascript"> document.getElementsByClassName('a1')[1].onclick = function () { document.getElementById('b1').removeAttribute('disabled'); } </script> //点击按钮2就会删除按钮1的disabled属性
操作内容:
普通元素.innerHTML = "值"; 会把值里面的标记执行(如果有换行之类的就会换行等····)
普通元素.innerText = "值"; 将值原封不动的展示出来,即使里面有标记也连标记一起打出来
var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
var s = 普通元素.innerText; 值会把此元素下的文本取出来,标记不予理会。
这中作用下对值中代码的态度和上边的完全反过来;
表单元素 - 只能使用value 来取值赋值
表单元素.value = "值";
var s = 表单元素.value;
操作相关元素:
注意:哥哥级,弟弟级,后辈级注意回车和空格
document.createElement('标记名'); - 动态创建dom对象
a.appendChild(对象); 往a标记中添加一个子级元素,添加的位置是最末尾