JavaScript中属性的用法

最新推荐文章于 2023-03-03 10:56:17 发布

nuan__nuan

最新推荐文章于 2023-03-03 10:56:17 发布

阅读量322

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/nuan__nuan/article/details/72935129

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

语法：元素.属性名
例如：console.log(btn.id);
1、属性不符合变量命名规则时
js中不识别符号‘-’：例如：font-size；
所以在属性的用法中，如：console.log(btn.style.font-size);
因为js不识别‘-’符号，所以font-size这个属性不能直接用点获取，执行时会把-以后的东西都去掉。解决方法如下：
(1)用 [ ]：
如：console.log(btn.style[‘font-size’]);
要把属性放在[‘ ’]中，[ ]里面可以是双引号或者单引号。
(2)用 .fontSize获取；
如：console.log(btn.style.fontSize);
去掉符号-，-后面第一个字母大写。

2、class属性的用法

    注：class是js中的保留字，不允许直接获取class属性，例如：
    <body>
        <div class="kaivon" id="kaivon"></div>
    </body>
    <script>
        var kaivon=document.getElementById('kaivon');
        console.log(kaivon.class);//结果为undefined
    </script>
    解决方法：用 className;
    如：console.log(kaivon.className);

3、innerHTML的用法

innerHTML获取到的是一个标签对里的所有内容。例如：
    <script>
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');
        btn.onclick=function(){
            console.log(box.innerHTML);//输出： <p>标题</p>这是文字 //(box标签对里所有内容)
        }
            box.innerHTML="<span>nihao<span>";//页面中box内的其他内容变成了 nihao。//（innerHTML设置值时，如果这个值里有html标签，在网页中会把innerHTML设置的值解析成真的html标签）//"
    </script>
    <body>
        <input type="button"id="btn"value="按钮">
        <div id="box"><p>标题</p>文字</div>
    </body>