JavaScript--innerHTML与className
来源:互联网 发布:淘宝网美国大樱桃 编辑:程序博客网 时间:2024/05/15 16:36
innerHTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ display: block; height: 60px; background: #21EE34; font:35px/60px "simhei"; color: #fff; } img{ width: 150px; height: 80px; } </style></head><body> <input type = "button" value = "click here" id = "btn1"> <div id = "box"> <span>德玛西亚大保健</span> </div></body></html><script type="text/javascript">/* innerHTML就是元素里面所有的东西 文字 换行 标签 空格... innerHTML可以进行读操作也能进行写操作 oDiv.innerHTML 读取oDiv里面的内容 oDiv.innerHTML = 新的值; 替换原来的div内容*/ var oDiv = document.getElementById("box"); var oBtn1 = document.getElementById("btn1"); var a = 1; oBtn1.onclick = function(){ if(a > 3) a = 1; //alert(oDiv.innerHTML); //oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>" oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>'; }</script>
效果展示
1
alert(oDiv.innerHTML);会保留div里面的空格 回车 标签等所有内容
2
oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>"
3
if(a > 3) a = 1;oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>';
4.
如果把button放在div里面的话,第二次点击就失效了,因为div被全部替换了,所以它的click方法不会被执行
className
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width:100px; height: 100px; background: red; border: 2px solid yellow; float: left; margin-left: 100px; text-align: center; font:30px/100px "simhei"; color: #fff; transition: 0.4s; } .a{ border: 6px solid #26FF08; background: #2E00EF; color: #ccc; border-radius: 50%; } </style></head><body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div></body></html><script type="text/javascript"> var oDiv1 = document.getElementById("box1"); var oDiv2 = document.getElementById("box2"); var oDiv3 = document.getElementById("box3"); oDiv1.onclick = function(){ oDiv1.className = "a"; } oDiv2.onclick = function(){ oDiv2.className = "a"; } oDiv3.onclick = function(){ oDiv3.className = "a"; }</script>
1.
实际上是通过className为div设置了一个class下图为点击以后的效果
2.
阅读全文
0 0
- JavaScript--innerHTML与className
- javascript - 常用互动 innerhtml className display class
- DOM(innerHTML和className)
- [ javascript ] getElementsByClassName与className和getAttribute!
- javascript笔记2-value与innerHTML区别
- JavaScript innerHTML
- JavaScript—className 属性
- style与className
- JavaScript加油站 1-innerHTML与innerText的用法与区别
- JavaScript innerText与innerHtml与value的区别
- JavaScript innerText与innerHtml与value的区别
- JavaScript中innerHTML与innerText的用法与区别
- JavaScript innerText与innerHtml与value的区别
- JavaScript 通过ClassName获取元素
- JavaScript的className的用法
- Javascript中innerHTML、outerHTML、innerText、outerText的用法与区别
- JavaScript实际应用:innerHTMl
- Javascript:小心使用innerHTML
- TensorFlow目录结构
- 【每日一题(3)】快乐的跳跃者 UESTC
- 【每日一题(4)】我想找个女朋友 HRBUST
- 深入研究MNIST
- 【每日一题(5)】密码(凯撒密码) FZU
- JavaScript--innerHTML与className
- java金额数字转中文工具类
- 百度语音使用
- spring四种依赖注入方式
- 【每日一题(7)】8球胜负(eight) UESTC
- 【每日一题(8)】Mammoth's Genome Decoding CodeForces
- sql mybatis
- jar包,war包和tar包的区别
- linux实现彩色进度条,rpm和yum安装的区别和进程的task_struck结构