如何使用JS修改页面元素（附练习案例）

前言：下面样例中使用到的getRandom(min,max)方法如有不解，详见随机数获取小方法（该方法对练习案例无任何影响，放心食用）

1.获取DOM对象

1.根据CSS选择器来获取DOM元素。语法：

document.querySelector('css选择器')

参数类型如下

指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

 2.使用案例：获取页面div元素并随机显示三国武将

//CSS
 <style>
        div{
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid #000;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
        }
 </style>
//html
 抽中的选手是:<div></div>
    

//获取页面中Div元素
let box = document.querySelector('div')
//根据最小最大值，生成范围内随机数
function getRandom(min,max){
            return Math.floor(Math.random()*(max - min +1))+min
}
//定义一个数组
let arr = ['赵云','黄忠','关羽','张飞', '马超', '刘备', '曹操']
//获取0~数组长度范围内随机数
let random = getRandom(0,arr.length-1)
//使获取的Div显示当前数组的武将名称
box.innerHTML = arr[random]

2.修改html元素常用属性

1.常见的属性比如：href、title、src等。语法：

对象.属性 = 值

举例说明：

//1.获取元素
let pic = document.quserySelector('img')
//2.操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'

2.使用案例：随机显示图片

//css
<style>
        img {
            width: 500px;
            height: 300px;
        }
</style>
//html
<img src="./images/1.jpg">

<script>
    //获取页面中img元素
     let pic = document.querySelector('img')
    //根据最大最小值获取随机数
      function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
      }
     let num = getRandom(1,6)
    //将页面图片修改为 其他数字命名的图片
     pic.src = `./images/${num}.jpg`
</script>

${ }是es6新增的字符串方法,可以配合单反引号完成字符串拼接的功能.例子：

let a='Karry Wang';

let str=`I love ${a}, because he is handsome.`;
//注意：这行代码是用返单号引起来的

3.通过style属性控制样式

1.通过style属性操作CSS。语法：

对象.style.样式属性 = 值

举例说明：

<div></div>
    <script>
        //获取元素
        let box = document.querySelector('div')
        //根据style操作CSS
        box.style.background = 'hotpink'
        box.style.width = '400px'
        box.style.marginTop='100px'
 </script>

2.使用案例：修改页面随机背景图片

 <script> 
       //根据最大最小值获得随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let num = getRandom(1, 10)
       //将背景图片修改为随机数字命名的图片
        document.body.style.backgroundImage= `url(./images/desktop_${num}.jpg)`;
</script>