操作元素element

小白在追赶

已于 2022-04-16 16:52:29 修改

阅读量914

点赞数 1

文章标签： javascript

于 2022-04-16 12:33:46 首次发布

本文链接：https://blog.csdn.net/weixin_59179354/article/details/124190205

版权

一、表单元素的属性操作

利用Dom可以操作表单元素属性

<body>
    <button>提交</button>
    <input type="text" value="请输入">
    <script>
        var bun = document.querySelector('button');
        var input = document.querySelector('input');
        bun.onclick = function(){
            // input.innerHTML = 'hhh' 表单不能通过该对象修改内容
            input.value = 'hhh';
            this.disabled = 'ture'
        }
    </script>
</body>

二、样式属性操作

element .style 行内样式操作 (适用于操作样式少或者功能简单)

注意：

a. 修改样式通过 style 属性引出

b. 如果属性有-连接符，需要转换为小驼峰命名法

c. 赋值的时候，需要的时候不要忘记加 css单位

注意：JS里面的样式采取驼峰命名法如：fontSize、backgroundColor

JS修改style样式操作，产生的是行内样式，css权重比较高

 <style>
    div{
        width:50px;
        height: 50px;
        background-color: pink;
    }
 </style>
            <div></div>
    <script>
        var div = document.querySelector('div')
        div.onclick = function(){
        this.style.backgroundColor = 'red';
        this.style.height = '100px';

        }
    </script>

2.element.className 类名样式操作（样式多式，先把样式写入css中，在通过element.className调用）. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

    <style>
    .first{
        width:50px;
        height: 50px;
        background-color: pink;
    }
    .change{
        width:100px;
        height: 50px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class='first' d="nav"></div>
    <script>
        var  nav = document.getElementById('nav');
        nav.onclick = function(){
  //如果想保留原先的类名，使用多类选择器
         nav.className = 'first change';
        }
    </script>
</body>

三、自定义属性的操作

3.1.获取属性值

element.属性获得属性值

element.getAttribute('属性')；

区别

element.属性 //获得内置属性值（元素本身自带的属性）

element.getAttribute('属性')；主要获得自定义的属性值（标准）程序猿自定义的属性

<body>
    <div id ='demo' index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        //我们自定义的index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));

    </script>

3.2设计元素的属性值

element.属性='值'

<div id ='demo' index="1" class ='nav'></div>
var div = document.querySelector('div');
div.id='test'; //修改属性值
div.className = 'navs' 修改属性值

element.setAttribute('属性'，'值')；主要针对于自定义属性

    <div id ='demo' index="1"></div>
    <script>
     var div = document.querySelector('div');
     div.setAttribute('id','text') //修改属性值
     div.setAttribute('class','footer') // 增加属性、class特殊。这里的class不是className
    </script>

移除属性：element.removeAttribute('属性')；

<div id ='demo' index="1" class ='nav'></div>
var div = document.querySelector('div');
div.removeAttribute('index');

案例：Tab栏

    <style>
    .products .main {
      float: left;
      display: none;
    }

    .products .main.active {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class=" active">国际大牌<span>◆</span></li>
      <li>国妆名牌<span>◆</span></li>
      <li>清洁用品<span>◆</span></li>
      <li>男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <a href="###"><img src="../../image/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="../../image/nanshijingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="../../image/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="../../image/qingjieyongpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

  <script>
   //案例分析 Tab栏切换分2个打模块，上部分模块选项卡 ，点击某一个，当前这个样式变化，其他不变（排他思想修改样式）
            //下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写道点击事件里面
            //规律：下面的模块显示内容和上面的选项卡一一对应
            //核心思路：给上面的li添加自定义属性，属性值从0开始
            //当点击某个li，让里面的序号的内容显示其余隐藏（排他思想）
   var lis = document.querySelector('.tab').querySelectorAll('li');//获取元素
   var items = document.querySelectorAll('.main');
   //循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
      lis[i].setAttribute('index', i);//添加li自定义属性与属性值
     
      lis[i].onclick = function () {
        // *排他思想，清除所有人
        for (var i = 0; i < lis.length; i++) {
          //*样式清除
          lis[i].className = '';
        }
        //*留下自己，让对应的样式显示出来
        this.className = 'active';

        //下部分显示的内容模块
        var index = this.getAttribute('index');
        // console.log(index);
        //排他思想 隐藏不是点击的内容
        for (var j = 0; j < items.length; j++) {
          items[j].style.display = 'none';
        }
        items[index].style.display = 'block';

      }
    }
  </script>
  </head>

  <body>

  </body>