100字范文 > JavaScript - 操作元素 - 修改元素属性和样式属性

JavaScript - 操作元素 - 修改元素属性和样式属性

时间：2018-10-25 10:47:16

文章目录

一、修改元素属性语法使用案例 : 分时问候并显示不同的图片二、修改表单属性三、点击按钮将密码框切换为文本框鼠标按下显示密码, 鼠标松开隐藏密码切换密码显示与隐藏四、修改样式属性关闭二维码案例循环精灵图案例五、使用className修改样式属性鼠标移入显示下拉菜单案例

一、修改元素属性

语法

元素. 属性 = 新的值;

使用

<body><button id='btn1'>第一张</button><button id='btn2'>第二张</button> <br><img src="./images/1.jpg" alt=""><script>// 获取元素var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var img1 = document.querySelector('img');// 绑定事件btn2.onclick = function () {img1.src = './images/2.jpg';}btn1.onclick = function () {img1.src = './images/1.jpg';}</script></body>

案例 : 分时问候并显示不同的图片

<body><p>早上好</p><img src="./images/zao.jpg" alt=""><script>// 1. 获取元素var p = document.querySelector('p');var img = document.querySelector('img');var hours = new Date().getHours();if (hours < 12 && hours > 0) {p.innerHTML = '早上好';img.src = './images/zao.jpg';} else if (hours > 12 && hours < 20) {p.innerHTML = '中午好';img.src = './images/zhong.jpg';} else {p.innerHTML = '晚上好';img.src = './images/wan.jpg';}</script></body>

二、修改表单属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button>按钮</button><input type="text" value="输入内容"><script>// 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 绑定事件btn.onclick = function () {// 表单里面的值, 是通过 value 来修改的.input.value = '...';// 如果想要某个表单被禁用, 不能再点击.btn.disabled = true;}</script></body></html>

三、点击按钮将密码框切换为文本框

鼠标按下显示密码, 鼠标松开隐藏密码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="password"><button>眼睛</button><script>// 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 绑定事件// 鼠标按下显示密码btn.onmousedown = function () {input.type = 'text';}// 鼠标松开隐藏密码btn.onmouseup = function () {input.type = 'password';}</script></body></html>

切换密码显示与隐藏

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="password"><button>眼睛</button><script>// 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');var flag = 0;btn.onclick = function () {if (flag) {input.type = 'password';flag--;} else {input.type = 'text';flag++;}}</script></body></html>

四、修改样式属性

可以通过JS修改元素的大小, 颜色, 位置等样式.

element.className: 类名样式操作.

element.style: 行内样式操作.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: red;}</style></head><body><div></div><script>// 获取元素var di = document.querySelector('div');di.onclick = function () {this.style.backgroundColor = 'pink';}</script></body></html>

this 指向当前函数的调用者

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

关闭二维码案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?c9xd3i');src: url('fonts/icomoon.eot?c9xd3i#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?c9xd3i') format('truetype'),url('fonts/icomoon.woff?c9xd3i') format('woff'),url('fonts/icomoon.svg?c9xd3i#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}* {margin: 0;padding: 0;}.box {position: relative;margin: 100px 500px;}.box span {position: absolute;top: 0px;width: 20px;height: 20px;font-family: 'icomoon';font-size: 10px;text-align: center;padding-top: 2.5px;color: #ccc;border: 1px solid #ccc;box-sizing: border-box;}.box span:hover {cursor: pointer;}.box1 {position: absolute;width: 200px;height: 230px;left: 20px;color: red;font-size: 20px;border: 1px solid #ccc;text-align: center;}.box1 p {margin: 10px 0;}.box1 img {width: 80%;}</style></head><body><div class='box'><span></span><div class='box1'><p>去领红包</p><img src="./images/111.png" alt=""></div></div><script>// 获取元素var span = document.querySelector('span');var box = document.querySelector('.box');// 绑定事件span.onclick = function () {box.style.display = 'none';}</script></body></html>

循环精灵图案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;margin: 15px;background-image: url(./images/222.png);background-position: 0 0;}</style></head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {var index = i * -44;lis[i].style.backgroundPosition = '0 ' + index + 'px';}</script></body></html>

五、使用className修改样式属性

简单来说就是先定义css样式, 当事件被触发的时候, 把要修改的元素的类名变成定义css样式的类名.

className 会直接更改元素的类名, 会覆盖原先的类名.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;}.change {background-color: pink;margin-top: 100px;}</style></head><body><div></div><script>var text = document.querySelector('div');text.onclick = function () {text.className = 'change';}</script></body></html>

鼠标移入显示下拉菜单案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?67ioew');src: url('fonts/icomoon.eot?67ioew#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?67ioew') format('truetype'),url('fonts/icomoon.woff?67ioew') format('woff'),url('fonts/icomoon.svg?67ioew#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}* {margin: 0;padding: 0;}.box {font-size: 12px;margin: 100px 300px;}.box dl dt {width: 77px;height: 43px;line-height: 43px;text-align: center;}.box dl dt:hover {background-color: #FCFCFC;color: #FF8400;}.dds {display: none;}.box dl dd {width: 77px;height: 35px;border: 1px solid #FF8400;border-top: 0;box-sizing: border-box;line-height: 35px;text-align: center;box-shadow: 2px 0px 3px #ccc;}</style></head><body><div class="box"><dl><dt>微博</dt><div class='dds'><dd>私信</dd><dd>评论</dd><dd>@我</dd></div></dl></div><script>// 获取元素var dt = document.querySelector('dt');var dds = document.querySelector('.dds');dt.onmouseover = function () {dds.style.display = 'block';}dt.onmouseout = function () {dds.style.display = 'none';}</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。