前端实践--JavaScript--控制类名(className 属性)+改变样式
来源:互联网 发布:mac可擦除 编辑:程序博客网 时间:2024/04/27 14:15
通过className属性来设置元素的样式:
给id=”p1”元素通过className添加”类名为one”的样式。当点击”添加样式”按钮,第一段文字添加样式。
给id=”p2”元素通过className修改为”类名为two”的样式。当点击”更改外观”按钮,第二段文字更改样式。
代码:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>className属性</title><style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style></head><body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script></body></html>
设置前演示效果:
设置后演示效果:
任务来源:慕课网- - 《JavaScript 入门》 - - 控制类名(className 属性)
编写”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置”的函数,点击相应按钮执行相应操作,点击”取消设置”按钮后,提示是否取消设置,如是执行操作,否则不做操作。
代码:
<!DOCTYPE HTML><html><head><meta http-equiv="txttent-Type" txttent="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;}p{ line-height:18px; text-indent:2em;}</style></head><body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" value="改变颜色" onclick="set.changeColor()"> <input type="button" value="改变宽高" onclick="set.changeSize()"> <input type="button" value="隐藏内容" onclick="set.objHide()"> <input type="button" value="显示内容" onclick="set.objShow()"> <input type="button" value="取消设置" onclick="set.offSet()"> </form> <script type="text/javascript"> var txt=document.getElementById("txt"); var set={ changeColor:function(){ txt.style.color="red"; txt.style.backgroundColor="#ccc"; }, changeSize:function(){ txt.style.width="300px"; txt.style.height="300px"; }, objHide:function(){ txt.style.display="none"; }, objShow:function(){ txt.style.display="block"; }, offSet:function(){ var message=confirm("你确定要重置所有设置么?"); if(message==true){ txt.removeAttribute('style'); } } } </script></body></html>
设置前演示效果:
设置后演示效果:
改变颜色:
改变宽高:
隐藏内容:
任务来源:慕课网- - 《JavaScript 入门》- - 编程挑战
0 0
- 前端实践--JavaScript--控制类名(className 属性)+改变样式
- 控制类名(className 属性)
- 14控制类名className
- JS基础第10课:控制类名(className 属性)
- Javascript通过控制类名更改样式
- JavaScript—className 属性
- (14)问卷调查:两种方式className、div样式属性值改变、单选按钮性格测试
- 动态添加类和元素样式属性(style and className)
- 使用js改变DOM样式的三种方式 - className属性
- javascript 改变html样式常用属性
- 前端实践--JavaScript--流程控制语句
- 通过修改父类样式名。改变子类样式的
- 从零开始前端学习[11]:控制文本显示的样式属性
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果 2
- tree改变属性样式
- javascript改变样式
- javascript改变样式
- android实现手机震动
- 关于CocoPods不能联想头文件的解决
- 方法里的局部内部类不能访问一般的方法里的局部变量
- 剑指offer(java版)
- poj 1556 The Doors(最短路+计算几何)
- 前端实践--JavaScript--控制类名(className 属性)+改变样式
- Java基于Socket的简单推送
- Git各种撤销操作
- 第十周第十一周阅读程序-5-c
- Cygwin/shell 常用命令
- 开发工具大全
- POJ 1987Distance Statistics
- 【LeetCode】Patching Array
- kickstart无人值守,PXE+TFTP+FTP+DHCP