1.5.2. 元素的常用属性操作
- innerText,innerHTML 改变元素内容
- src ， href
- Id，alt，title
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
<body> <div title="刘德华" id="test"> 操作元素属性的值 以title为例 </div> <script> // 操作元素属性的值 以title为例 // 1. 获取 // element.属性 var div = document.querySelector('div') console.log(div.id); console.log(div.title); console.dir(div); // 2.设置 // element.属性 = 'XXXXX' div.title = '刘德华刘德华刘德华刘德华刘德华' </script> </body>
案例代码–点击按钮，切换图片
<body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <br> <img src="images/ldh.jpg" alt="" title="刘德华"> <script> // 实现效果：点击按钮，切换图片 // 修改元素属性 src // 1. 获取元素 var ldh = document.querySelector('#ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img') // 2. 注册事件 处理程序 ldh.onclick = function() { img.src = 'images/ldh.jpg' img.title = '刘德华' } zxy.onclick = function() { img.src = 'images/zxy.jpg' img.title = '张学友' } </script> </body>
1.5.3. 案例：分时问候
// 1.获取元素 var img = document.querySelector('img'); var div = document.querySelector('div'); // 2.获取当前小时数 var h = (new Date()).getHours(); // 3.做判断 if (h<12) { img.src = 'images/s.gif' div.innerHTML = '大家上午好，好好写代码' } else if (h<18) { img.src = 'images/x.gif' div.innerHTML = '大家x午好，好好写代码' } else { img.src = 'images/w.gif' div.innerHTML = '大家晚上好，好好写代码' }
1.5.4. 表单元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
案例代码
<body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 实现效果：点击按钮 input的内容显示成被点击了 // 操作元素之表单属性(value/disabled/checked/selected) // 1. 获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2.事件绑定 btn.onclick = function () { // input.innerHTML = '被点击了' // innerHTML 给普通标签用的 // 表单里的值是通过 value 来改变的 input.value = '被点击了' // 表单（button按钮）禁用 disabled = true // btn.disabled = true; // this 指向函数调用者 btn this.disabled = true; } // q1: 表单里的值是通过谁来改变的？？？value // q2: 表单（button按钮）禁用可以用什么属性？？？disabled </script> </body>
1.5.5. 案例：仿京东显示密码
<body> <div class="box"> <label for=""> <img id="ele" src="./images/close.png" alt="" srcset=""> </label> <input type="password" name="" id="pwd" class=""> </div> <script> // 1.获取元素 var ele = document.getElementById('ele'); var pwd = document.getElementById('pwd'); // 2.注册事件 var flag = 0 ele.onclick = function() { // 点击一次之后， flag 一定要变化 if (flag == 0) { ele.src = 'images/open.png' pwd.type = 'text' flag = 1 // 赋值操作 } else { ele.src = 'images/close.png' pwd.type = 'password' flag = 0 } } </script> </body>
1.5.6. 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
常用方式
方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
注意：
- JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
- JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
案例代码
<body> <div style="width: 250px; height:250px" class="test"></div> <script> // 样式属性操作 // 常用的两种方式：element.style / element.className // 用法两种：1.取值 2.设置值 // var div = document.querySelector('div') // console.log(div.style.width); // 250px 取的是行内样式 // div.style.width = '400px'; // 设置值的必须带上单位 // console.log(div.className); // 'test' // div.className = 'test1'; // 如何赋值 会直接覆盖 原有的值 // 1.获取元素 var div = document.querySelector('div') // 2.注册事件 处理程序 div.onclick = function () { // 注意这个属性 采用驼峰写法 this.style.backgroundColor = 'purple' this.style.width = '250px' } // 需求：点击盒子，盒子背景颜色改成紫色，宽度变成200 </script> </body>
<body> <div class="box"> 淘宝二维码 <img src="images/tao.png" alt=""> <i class="close-btn">×</i> </div> <script> // 例子效果：点击关闭按钮 关闭淘宝的二维码 // 1. 获取元素 var closeBtn = document.querySelector('.close-btn'); var box =document.querySelector('.box'); // 2.注册事件 程序处理 closeBtn.onclick = function() { box.style.display = 'none' } </script> </body>
案例：循环精灵图背景
<body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> // 1. 获取元素 所有的小li var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标 var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </body>
案例：显示隐藏文本框内容
<body> <input type="text" value="手机"> <script> // 获得焦点事件 onfocus 失去焦点事件 onblur // 1.获取元素 var input = document.querySelector('input'); // 2.注册事件 input.onfocus = function () { if (this.value === '手机') { this.value = '' } // 获得焦点需要把文本框里面的文字颜色变黑 this.style.color = '#333' } input.onblur = function () { if (this.value === '') { this.value = '手机' } // 失去焦点需要把文本框里面的文字颜色变浅色 this.style.color = '#999' } </script> </body>
方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所以使用className。
案例代码
<body> <div class="first">文本</div> <script> // 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用 var test = document.querySelector('div'); test.onclick = function() { // this.style.backgroundColor = 'purple'; // this.style.color = '#fff'; // this.style.fontSize = '25px'; // this.style.marginTop = '100px'; // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first change'; } </script> </body>
案例：密码框格式提示错误信息
<body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> // 首先判断的事件是表单失去焦点 onblur // 如果输入正确则提示正确的信息颜色为绿色小图标变化 // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化 // 因为里面变化样式较多，我们采取className修改样式 // 1.获取元素 var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); //2. 注册事件 失去焦点 ipt.onblur = function() { // 根据表单里面值的长度 ipt.value.length if (this.value.length < 6 || this.value.length > 16) { // console.log('错误'); message.className = 'message wrong'; message.innerHTML = '您输入的位数不对要求6~16位'; } else { message.className = 'message right'; message.innerHTML = '您输入的正确'; } } </script> </body>
1.6. 今日总结
