首页
Search
1
pc端小米官网首页部分练习
658 阅读
2
js中的内置对象
616 阅读
3
CSS实现动画效果
594 阅读
4
DOM(节点操作children-自定义属性-)
575 阅读
5
CSS中的选择器
549 阅读
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
登录
Search
标签搜索
冒泡排序
css
float
clear
边框
字体
font
meta标签
声明bianl
标识符
Number
数据类型
css常用选择器
css关系选择器
css属性选择器
css伪类选择器
css伪元素
css选择器的权重
a元素的伪类
浮动
Typecho
累计撰写
35
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
1
篇与
的结果
2022-01-29
通过js操作元素之改变元素
导读:JavaScript 的DOM操作可以改变网页内容,结果和样式,我们可以利用DOM操作元素来改变元素里面的内容, 属性 等。注意以下都是属性element.innerText改变元素内容从起始位置到终止位置的内容,但它除html标签,同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行要求:当我们点击按钮,div里面的文字变成当前时间 //1.获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); ///2.注册事件 btn.onclick = function(){ div.innerHTML = getDate(); } //创建获取当前时间函数 function getDate(){ var date = new Date(); //获取当前时间 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();innerText和innerHTML区别innerText不能识别html标签 非标准 去除空格和换行div.innerTexr = '今天是:星期五'他会把strong这个标签输出,出来而不是加粗innerHTMLinnerHTML 识别html标签 W3C标准 保留空格和换行,推荐使用表单元素属性操作{callout color="#f0ad4e"}表单元素属性操作:type value checked selected disabled{/callout} <button>按钮</button> <input type="text" value="输入内容"> <script> /* 表单元素的属性操作 type,value,checked,selected,disabled, */ //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 ,this指向的是当前事件函数的调佣着 btn this.disabled = true; } </script>操作元素之样式属性操作通过js修改元素的大小,颜色,位置等样式element.style 行内样式element.className 类名样式注意:js里面的样式采取驼峰命名法比如 fontSize backgroundColorjs修改style样式操作,产生的是行内样式,css权重比较高通过className更改元素样式 <style> div{ width: 100px; height: 100px; background-color: #bfa; } .change{ width: 200px; height: 200px; margin-top:100px; } </style> </head> <body> <div class="first">文本</div> <script> //1.使用element.style 获得元素样式,如果样式比较少 或者 功能简单的情况下使用 var text = document.querySelector('div'); text.onclick = function(){ // 2.我们可以通过 修改元素的className更改元素的样式,适合于样式较多或者复杂的情况 /* this.className = 'change'; */ //3.如果想要哦保留原先的类名,可以这样 this.className = 'first change' } </script> </body> </html>
2022年01月29日
377 阅读
0 评论
0 点赞