js获取元素的方法与属性
js獲取元素的方法
?
可以使用內(nèi)置對(duì)象document上的getElementById方法來獲取頁面上設(shè)置了id屬性的元素，獲取到的是一個(gè)html對(duì)象，然后將它賦值給一個(gè)變量
? <scripttype="text/javascript">
??? var oDiv =document.getElementById('div1');
??? alert(oDiv) 彈出對(duì)話框
? </script>
? <div id="div1">這是一個(gè)div元素</div>
但是注意:如果把上面一段代碼放到?<head></head>中就會(huì)報(bào)錯(cuò)
?
解決方法:電腦加載
? <scripttype="text/javascript">
?? ?1.window.onload = function(){
?????? ?2.var oDiv = document.getElementById('div1');
??? }
? </script>
?
<div id="div1">這是一個(gè)div元素</div>
?
js操作元素的屬性
獲取的頁面元素，就可以對(duì)頁面元素的屬性進(jìn)行操作，屬性的操作包括屬性的讀和寫。
?
操作屬性的方法
- 1、“.” 操作
- 2、“[ ]”操作
?
屬性寫法
- 1、html的屬性和js里面屬性寫法一樣
- 2、“class” 屬性寫成 “className”
- 3、“style” 屬性里面的屬性，有橫杠的改成駝峰式，比如：“font-size”，改成”style.fontSize”
?
通過點(diǎn)（.）獲取屬性
<scripttype="text/javascript">
1.加載：window.onload =function(){
?????? ?2.獲取：var oInput = document.getElementById('input1');
?????? ?2.獲取：var oA = document.getElementById('link1');
????? ??3.// 讀取屬性值
??????? var sValue =oInput.value;
??????? var sType =oInput.type;
??????? var sName =oInput.name;
??????? var sLinks = oA.href;
??????? 4.// 寫(設(shè)置)屬性
?????? ?oA.style.color = 'red';
??????? oA.style.fontSize = sValue;
??? }
</script>
<inputtype="text" name="setsize" id="input1"value="20px">
<a href="" id="link1">百度</a>
?
通過[ ]獲取
<scripttype="text/javascript">
1.加載：window.οnlοad= function(){
????? ??2.獲取：var oInput1 =document.getElementById('input1');
????? ??2.獲取：var oInput2 =document.getElementById('input2');
?????? ?2.獲取：var oA =document.getElementById('link1');
?????? ?3.// 讀取屬性
?????? ?var sVal1 = oInput1.value;
??????? var sVal2 = oInput2.value;
??????? 4.// 寫(設(shè)置)屬性
??????? // oA.style.val1 = val2; 沒反應(yīng)
????? ??oA.style[sVal1] = sVal2;???????
??? }
</script>
<inputtype="text" name="setattr" id="input1"value="fontSize">
<input type="text" name="setnum" id="input2"value="30px">
<a href="" id="link1">百度</a>
通過獲取的標(biāo)簽的innerHtml屬性讀寫標(biāo)簽包裹的內(nèi)容
- 讀取 oDiv.innerHtml
- 寫入 oDiv.innerHTML = "新內(nèi)容"
總結(jié)
以上是生活随笔為你收集整理的js获取元素的方法与属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 编程竞赛控制系统(PC2)使用说明书
- 下一篇： 利用Jqurey写一个输入内容增加并且可