js属性操作上

最新推荐文章于 2023-05-12 13:44:41 发布

MerryMe2020

最新推荐文章于 2023-05-12 13:44:41 发布

阅读量80

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/jianjian_5201314/article/details/111463637

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js中两种操作属性的方法

1. 点

元素.属性

//示例代码1   
       box.onclick = function () {
              box.style.width = '300px';
          }

2. 方括号->[ ]

元素['属性']

//示例代码1
          box ['onclick'] = function () {
              box['style']['width'] = '300px';
          }

//示例代码2
          box ['on'+'click']= function () {  //+号通过计算拼接到一起
              box['style']['width'] = '300px';
          }

//示例代码3
//两种属性操作一起使用
          box ['onclick'] = function () {
              box['style'].width = '300px';

          }

//示例代码4
  box.onclick = function () {
              // box.style.fontSize = '36px';
              box.style['font-size'] = '36px'; //可以进行计算，处理不符合标识符问题

          }

js读写操作

读: ele.stycle.background;

写：ele.stycle.background = 'red'

示例代码1

观察box.style.width，输出为空，此处style属于行间style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="'box">这是文字</div>
<script>
    var box = document.getElementById('box');
    console.log(box.style.width);

</script>

</body>
</html>

修改入下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="box" style="width:200px;">这是文字</div>
<script>
    var box = document.getElementById('box');
    console.log(box.style.width);

</script>

</body>
</html>