JavaScript操作元素

最新推荐文章于 2024-07-18 15:48:23 发布

yyyyyyoow

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量481

点赞数 16

文章标签：前端 javascript

本文链接：https://blog.csdn.net/mobolove/article/details/140047503

版权

常见的鼠标事件
onclick       鼠标点击左键触发
onmouseover   鼠标经过触发
onmouseout   鼠标离开触发
onfocus       获得鼠标焦点触发
onblur       失去鼠标焦点触发
onmousemove   鼠标移动触发
onmouseup   鼠标弹起触发
onmousedown   鼠标按下触发

操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作来改变元素里面的内容、属性等。注意以下都是属性
所以<script></script>放在<body></body>中的最后，避免 JavaScript 操作 DOM 失效
1.改变元素内容
element.innerText
从其实位置到种植位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<a></a>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}

function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate();//页面加载就直接显示
   var a = document.querySelector('a');
   a.innerText = '<strong>aaa</strong>bbb';//<strong>aaa</strong>bbb
   a.innerHTML = '<strong>aaa</strong>bbb';//aaabbb(aaa加粗)
</script>
</body>
innerText和innerHTML是可读写的可以获得里面的元素
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
var p = document.querySelector('p');
console.log(p.innerText);//我是文字 123
console.log(p.innerHTML);//我是文字
               <span>123</span>
</script>
</body>

2.src、href
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">

}
</script>
</body>

3.表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type,value,checked,selected,disabled
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是普通盒子比如 div 标签里面的内容
// 表单里面的值文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
例
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后， flag 一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}

}
</script>
</body>

4.样式属性操作
修改样式属性
1.element. style 行内样式操作
<script>
    var div=document. querySelector('div');
    div. οnclick=function (){
        this. style. backgroundColor='purple';
    }
</script>
例
<body>
    <div class ="box ">
        淘宝二维码
        <img src="image/tao. png" alt="">
        <i class="close-btn"></i>
    </div>
    <script>
        var btn=document. querySelector('. close-btn');
        var box=document. querySelector('. box');
        btn. οnclick=function (){
            box. style. display ='none';
        }
    </script>
</body>
注
1.JS里面的样式采取驼峰命名法
比如fontSize, backgroundColor
2.JS修改style样式操作，产生的是行内样式，css权重比较高
例  循环精灵图（精灵图一般竖着一条排列）
<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
   //querySelectorAll()返回指定选择器的所有元素对象集合
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 -'+44+'px'；第一个x轴坐标第二个y轴坐标，之后的精灵图都往下取-y（负值），
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>

获得焦点onfocus失去焦点onblur
例
<body>
<input type="text" value="手机">
<script>
// 1.获取元素
var text = document.querySelector('input');
// 2.注册事件获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3. 注册事件失去焦点事件 onblur
text.onblur = function() {
// console.log('失去了焦点');
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
</script>

</body>

2. element. className 类名样式操作
因为class是保留字所以用className
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}

.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<body>
<div class="first">文本</div>
<script>
//1.使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用
   //2. 我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况
   var test = document.querySelector('div');
test.onclick = function() {
   //当前类名改为change，会覆盖原先的类名
   // this.className = 'change';
   // 如果想要保留原先的类名，多类名选择器
this.className = 'first change';//<div class="first change">
}
</script>
</body>

yyyyyyoow

关注

16
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作元素

return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];// input.innerHTML = '点击了';//我是文字 123。
复制链接

扫一扫