zoukankan      html  css  js  c++  java
  • 【JS教程06】操作元素

    操作元素属性

    获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

    操作元素属性 
    var 变量 = 元素.属性名     读取属性
    元素.属性名 = 新属性值    改写属性

    (1)属性名在js中的写法 
    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 sValue = oInput.value;
            var sType = oInput.type;
            var sName = oInput.name;
            var sLinks = oA.href;
            // 写(设置)属性
            oA.style.color = 'red';
            oA.style.fontSize = sValue;
        }
    
    </script>
    
    ......
    
    <input type="text" name="setsize" id="input1" value="20px">
    <a href="https://www.cnblogs.com/zeug/p/11386636.html" id="link1">博客园</a>

    (2)innerHTML 
    innerHTML可以读取或者写入标签包裹的内容

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //读取
            var sTxt = oDiv.innerHTML;
            alert(sTxt);
            //写入
            oDiv.innerHTML = '<a href="https://www.cnblogs.com">博客园<a/>'; } </script>  ...... <div id="div1">这是一个div元素</div>
  • 相关阅读:
    Python-内置函数
    Python-匿名函数
    Python-函数递归-二分法
    Python-函数递归
    Day4-函数
    CSS-定位
    CSS-文本属性,文字属性
    CSS-浮动
    CSS-盒模型
    CSS-继承和层叠
  • 原文地址:https://www.cnblogs.com/zeug/p/11386636.html
Copyright © 2011-2022 走看看