javascript 根据id添加样式 js给id元素赋值

一.获取元素

1.根据id名称获取元素
语法：document.getElementById(‘id名称’)
作用：获取文档流中id对应的一个元素
返回值：

• 如果有id对应的元素，就是这个元素
• 如果没有id对应的元素，就是null

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据id获取元素赋值给a
        var a=document.getElementById('container')
        console.log(a)
    </script>

2.根据元素类名获取元素

语法：document.getElementsByClassName(‘元素类名’)

作用：获取文档流中所有类名对应的元素

返回值：必然是一个伪数组

• 如果有类名对应的元素，有多少获取多少
• 如果没有对应的元素，空的伪数组

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据class获取元素赋值给a
        var a=document.getElementsByClassName('box')
        console.log(a)
    </script>

3.根据标签名获取元素

语法：document.getElementsByTagName(‘标签名’)

作用：获取文档流中所有标签名对应的元素

返回值：必然是一个伪数组

• 如果有类名对应的元素，有多少获取多少
• 如果没有对应的元素，空的伪数组

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据标签名获取元素赋值给a
        var a=document.getElementsByTagName('div')
        console.log(a)
    </script>

4.根据选择器获取元素

语法：document.querySelector(‘选择器’)

作用：获取文档流中满足选择器规则的第一个元素

返回值：

• 如果有选择器对应的元素，获取到第一个
• 如果没有选择器对应的元素，就是null

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据选择器获取元素赋值给a
        var a=document.querySelector('div')
        console.log(a)
    </script>

5.通过选择器获取一组元素

语法：document.querySelectorAll(‘选择器’)

作用：获取文档流中所有满足选择器规则的元素

返回值：必然是一个伪数组

• 如果有类名对应的元素，有多少获取多少
• 如果没有对应的元素，空的伪数组

<div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据选择器获取元素赋值给a
        var a=document.querySelectorAll('.box')
        console.log(a)
    </script>

以上就是js获取元素的5种方法

获取完元素，接下来就可以对元素进行一些操作了

二.操作元素内容

1.操作元素文本内容

• 获取：元素.innerText
• 设置：元素.innerText=‘新内容’

<button>操作</button>
    <div>
        <p>文本内容</p>
    </div>

    <script>
        //获取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //获取元素的文本内容
        console.log(ele.innerText)
        //给按钮绑定点击事件
        btn.onclick=function(){
            //改变元素的文本内容
            ele.innerText='改变后的内容'
        }
    </script>

2.操作元素超文本内容

• 获取：元素.innerHTML
• 设置：元素.innerHTML=‘新内容’

<button>操作</button>
    <div>
        <p>文本内容</p>
    </div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //获取元素的文本内容
        console.log(ele.innerHTML)
        //给按钮绑定点击事件
        btn.onclick=function(){
            //改变元素的文本内容
            ele.innerHTML='<span>改变后的内容</span>'
        }
    </script>

三.操作元素属性

1.原生属性

• 获取：元素.属性名
• 设置：元素.属性名=‘属性值’

属性名

<button>操作</button>
    <div id="box">div标签</div>
    <input type="password">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //获取元素属性
        console.log(box.id)
        console.log(inp.type)
    </script>

设置

<button>操作</button>
    <div id="box">div标签</div>
    <input type="password">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //给元素绑定点击事件
        btn.onclick=function(){
            //修改元素属性
            box.id='screen'
            inp.type='checkbox'
        }
    </script>

2.自定义属性

• 获取：元素.getAttribute(‘属性名’)
• 修改：元素.setAttribute(‘属性名’,‘属性值’)
• 删除：元素.removeAttribute('属性名’)

获取

<button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //获取元素自定义属性
        console.log(inp.getAttribute('type'))
        console.log(inp.getAttribute('hello'))
    </script>

修改

<button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //绑定点击事件
        btn.onclick=function(){
            //修改自定义属性
            inp.setAttribute('hello','你好')
        }
    </script>

删除

<button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //绑定点击事件
        btn.onclick=function(){
            //删除自定义属性
            inp.removeAttribute('hello')
        }
    </script>

四.操作元素类名

• 获取：元素.className
• 设置：元素.className=‘新内容’

获取

<button>操作</button>
    <div class="content">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取类名
        console.log(box.className)
    </script>

设置

<button>操作</button>
    <div class="content">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //绑定点击事件
        btn.onclick=function(){
            //修改类名
            box.className='screen'
        }
    </script>

五.操作元素行类样式

• 获取：元素.style.样式名
• 设置：元素.style.样式名=‘样式值’

获取

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取样式
        console.log(box.style.width)
        console.log(box.style.height)
        console.log(box.style.backgroundColor)
    </script>

设置

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //绑定点击事件
        btn.onclick=function(){
            //修改样式
            box.style.backgroundColor='red'
        }
    </script>

六.获取元素非行内样式

• 获取：window.getComputedStyle(元素).样式名

ps:可获取行内样式，也可取非行内样式，不能设置非行内样式

获取

<button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取非行内样式
        console.log(window.getComputedStyle(box).height)
    </script>