(2018-05-06.Python從Zero到One)七、(前端)JavaScript__1.7.5操作元素屬性

上一篇文章為:→1.7.4獲取元素方法一

操作元素屬性

獲取的頁面元素,就可以對頁面元素的屬性進行操作,屬性的操作包括屬性的讀和寫。

操作屬性的方法

1、“.” 操作
2、“[ ]”操作

屬性寫法

1、html的屬性和js里面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性里面的屬性,有橫杠的改成駝峰式,比如:“font-size”,改成”style.fontSize”

通過“.”操作屬性:

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 寫(設(shè)置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a  id="link1">傳智播客</a>

通過“[ ]”操作屬性:

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 寫(設(shè)置)屬性
        // oA.style.val1 = val2; 沒反應(yīng)
        oA.style[val1] = val2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a  id="link1">傳智播客</a>

innerHTML

innerHTML可以讀取或者寫入標簽包裹的內(nèi)容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var txt = oDiv.innerHTML;
        alert(txt);
        //寫入
        oDiv.innerHTML = '<a ;
    }
</script>

......

<div id="div1">這是一個div元素</div>

下一篇文章為:→1.7.6函數(shù)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,204評論 1 92
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,684評論 0 44
  • 今天上午的主要學(xué)習(xí)內(nèi)容還是for語句,練習(xí)了,for語句的注意事項,括號里面只能有2個分號,而且注意語句的執(zhí)行順序...
    張寶興閱讀 141評論 0 0
  • K SIDE 1 在某個長瀨智也窮到交不起網(wǎng)費的月初,樂團拉到了一筆贊助。 從每個宿舍傳了一輪的講座調(diào)...
    棋逢對手_f724閱讀 1,086評論 0 0
  • 有點長,慢慢看。 最近,常常想到朋友這個詞的定義。 一直都不知道自己是個性情冷漠還是熱情的人。 2000年,大學(xué)畢...
    山灃閱讀 647評論 0 0

友情鏈接更多精彩內(nèi)容