本文摘自PHP中文网,作者青灯夜游,侵删。
方法:1、使用“element.innerText='值'”或“element.innerHTML='值'”语句修改元素内容;2、使用“element.style”或“element.className”语句修改元素样式属性。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
操作修改元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
改变元素的内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。
innerText不识别HTML标签,innerHTML识别HTML标签。这两个属性是可读写的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <body>
<button>
显示系统当前时间
</button>
<div>
某个时间
</div>
<script>
var btn = document.querySelector( 'button' );
var div = document.querySelector( 'div' );
btn.onclick = function (){
div.innerText = 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];
}
</script>
</body>
|
运行后,显示某个时间,当点击显示系统当前时间即可显示进当前的日期及星期。
修改样式属性
element.style修改行内式操作,element.className修改类名样式属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < head >
< style >
div {
width:200px;
height:200px;
background-color:pink;
}
</ style >
</ head >
< body >
< div >
</ div >
< script >
var div = document.quertSelector('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
this.style.width='300px';
}
</ script >
</ body >
|
程序运行后,出现一个宽高均为200像素的粉红色盒子,点击盒子,变成宽300像素高200像素的紫色盒子。JS修改style样式操作,产生的是行内样式。
使用className更改样式属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <head>
<style>
div {
width:100px;
height:100px;
background-color:pink;
}
.change {
width:200px;
height:200px;
background-color:purple;
}
</style>
</head>
<body>
<div>
文本
</div>
<script>
vet test =document.querySelector( 'div' );
test.onclick = function (){
this .className = 'change' ;
}
</script>
</body>
|
【相关推荐:javascript学习教程】
以上就是javascript怎么修改元素的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js中object.defineproperty的用法介绍(代码示例)
mac写javascript用什么软件
javascript警告是什么意思
javascript怎么修改style样式
javascript使用什么标签实现
javascript如何设置字体大小
javascript是一种运行在什么语言
javascript中show方法怎么用
vue.js-div怎么隐藏滚动条
javascript中的转义字符有哪些
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么修改元素