• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 操作标签元素属性获取和设置怎么实现?

发布时间:2021-12-27 15:13:18 浏览 2178 来源:博学谷 作者:小谷

    JS操作标签元素属性获取和设置怎么实现?标签HTML是由一套标记标签组成,通常就叫标签。元素内容指开始标签与结束标签之间的内容,单标签没有元素内容,表单标签除外。属性是为HTML 元素提供的附加信息用来修饰标签。

    操作标签元素属性获取和设置

    操作标签元素属性学习目标:掌握获取和设置标签元素属性

    一、属性的操作

    首先获取的页面标签元素,然后就可以对页面标签元素的属性进行操作,属性的操作包括:

    属性的读取

    属性的设置

    属性名在js中的写法

    html的属性和js里面属性大多数写法一样,但是“class” 属性写成 “className”

    “style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”

    <style>
        .sty01{
            font-size:20px;
            color:red;
        }
        .sty02{
            font-size:30px;
            color:pink;
            text-decoration:none;
        }
    
    </style>
    
    <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;
    
            // 操作class属性,需要写成“className”
            oA.className = 'sty02';
    
            // 写(设置)属性
            oA.style.color = 'red';
            oA.style.fontSize = sValue;
        }
    
    </script>
    
    <input type="text" name="setsize" id="input1" value="20px">
    <a href="#" id="link01" class="sty01">这是一个链接</a>

    二、innerHTML

    innerHTML可以读取或者设置标签包裹的内容

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //读取
            var sTxt = oDiv.innerHTML;
            alert(sTxt);
            //写入
            oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
        }
    </script>
    
    
    <div id="div1">这是一个div元素</div>

    三、小结

    标签属性的获取和设置:

    var 标签对象 = document.getElementById('id名称'); -> 获取标签对象

    var 变量名 = 标签对象.属性名 -> 读取属性

    标签对象.属性名 = 新属性值 -> 设置属性

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 变量作用域是什么?怎么用? 下一篇: 数组及数组的操作方法是什么?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码