js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作 |
您所在的位置：网站首页 › js设置文本样式在哪 › js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作 |
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
|
文章目录
操作元素改变元素内容有两种方式：interText 和 innerHTML的区别常用的元素的属性操作案例：仿电脑系统时间问好表单元素的属性操作案例：仿京东显示隐藏密码样式属性操作
操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。 改变元素内容有两种方式：语法1： element.innerText语法2： element.innerHTML例子： 显示当前系统时间 某个时间 123 //当我们点击了按钮，div里面的文字会发生变化 //1.获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); //2.注册事件 btn.onclick = function () { // div.innerText = '2020-10-8'; div.innerText = getDate(); } function getDate() { var date = new Date(); // console.log(date.getFullYear()); //返回当前日期的年 20 // console.log(date.getMonth() + 1); //月份 返回的月份小1个月 记得月份+1 // console.log(date.getDate()); //返回的是几号 // console.log(date.getDay()); //3 周一返回的是1 周六返回的是 6 但是周日返回的是0 //我们写一个2020年10月8日 星期四 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); var day = date.getDay(); // console.log('今天是：' + year +'年' +month + '月' +dates +'日'+arr[day]); return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day]; } //我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerText = getDate(); interText 和 innerHTML的区别这两个属性是可读写的 ，可以获取元素里面的内容 innerText 从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉。 innerHTML 起始位置到终止位置的全部内容，它识别 html 标签，同时保留空格和换行。 温润如玉贺知书 艾子瑜 //innerText 和 innerHTML 的区别 //1.innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector('div'); // div.innerText = '今天是 ：2020-10-8 '; //2.innerHTML 识别 html 标签 W3C标准 保留空格和换行的 div.innerHTML = '今天是 ：2020-10-8 '; //这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); 常用的元素的属性操作 innerText、innerHTML 改变元素内容src、hrefid、alt、title例子： img { width: 300px; height: 260px; } 奶盖 西瓜 //修改元素属性 src //1.获取元素 var ng = document.getElementById('ng'); var xg = document.getElementById('xg'); var img = document.querySelector('img'); //2.注册事件 处理程序 xg.onclick = function () { img.src = 'images/xigua.jpg'; img.title = '西瓜不加冰'; } ng.onclick = function () { img.src = 'images/naigai.jpg'; img.title = '奶盖不加糖'; }视图： 案例分析： 根据系统不同时间来判断，所以需要用到日期内置对象。利用多分支语句来设置不同的图片。需要一个图片，并且根据时间来修改图片，就需要用到操作元素 src 属性需要一个 div 元素，显示不同问候语，修改元素内容即可。例子： 上午好 /* 案例分析： 根据系统不同时间来判断，所以需要用到日期内置对象。 利用多分支语句来设置不同的图片。 需要一个图片，并且根据时间来修改图片，就需要用到操作元素 src 属性 需要一个 div 元素，显示不同问候语，修改元素内容即可。 */ //1.获取元素 var img = document.querySelector('img'); var div = document.querySelector('div'); //2.得到当前的小时数 var date = new Date(); var h = date.getHours(); //3.判断小时改变图片和文字信息 if (h /* 表单与元素的属性操作 利用DOM可以操作如下表单元素的属性： type,value,checked,selected,disable */ //1.获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); //2.注册事件 处理程序 btn.onclick = function() { //input.innerHTML = '点击了';这个是普通盒子，比如div标签里面的内容 //表单 里面的值，文字内容是通过value来修改的 input.value = '被点击了'; //如果想要某个表单被禁用，不能再点击disbled 我们想要这个按钮button禁用 // btn.disabled = true; this.disabled = true; //this 指向的是事件函数的调用者 btn } 案例：仿京东显示隐藏密码 点击按钮将密码框切换为文本框，并可以查看密码明文。 核心思路： 点击眼睛按钮，把密码框类型改为文本框就可以看到里面的密码。一个按钮两个状态，点击一次，切换为文本，继续点击一次切换为密码框。算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1。例子： .box { position: relative; width: 400px; border-bottom: 1px solid #cccccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 10px; right: 2px; width: 24px; } //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; } }视图： 1. element.style 行内样式操作 2. element.className 类名样式操作 注意： JS里面的样式采取 驼峰命名法，比如fontSize、bacgroundColorJS修改style样式操作，产生的是行内样式，css权重比较高例子： Document div { width: 200px; height: 200px; background-color: pink; } /* 样式属性操作 我们可以通过JS修改元素大小、颜色、位置等样式。 1.element.style 行内样式操作 2.element.className 类名样式操作 注意： 1.JS里面的样式采取驼峰命名法，比如fontSize、bacgroundColor 2.JS修改style样式操作，产生的是行内样式，css权重比较高 */ //1.获取元素 var div = document.querySelector('div'); //2.注册事件 处理程序 div.onclick = function() { //div.style里面的属性 采取驼峰命名法 this.style.backgroundColor = 'purple'; this.style.width = '250px'; }视图： |
【本文地址】
今日新闻 |
推荐新闻 |