首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:16
JS display和visibility属性:显示和隐藏元素
CSS 使用 visibility 和 display 属性控制元素显示或隐藏。visibility 和 display 属性各有优缺点,如果担心隐藏元素会破坏页面结构和页面布局,可以选用 visibility 属性。visibility 属性能够隐藏元素,但是会留下一块空白区域,影响页面视觉效果。如果不考虑布局问题,则可以考虑使用 display 属性。
显示和隐藏
使用 style.display 属性可以设计元素的显示和隐藏。恢复 style.display 属性的默认值,只需设置 style.display 属性值为空字符串(style.display="")即可。示例
下面设计一个扩展函数,恩局参数决定是否进行显示或隐藏。//设置或切换元素的显示或隐藏 //参数:e表示操作元素,b为true时,将显示元素e;为false时,将隐藏元素e //如果省略参数b,则根据元素e的显示状态进行显示或隐藏切换 function display (e, b) { //如果第 2 个参数存在且不为布尔值,则抛出异常 if (b && (typeof b != "boolean")) throw new error("第 2 个参数应该是布尔值!"); var c = getStyle (e, "display"); //获取当前元素的显示属性值 (c != "none") && (e._display = c); //记录元素的显示性质,并存储到元素的属性中 e._display = e._display || ""; //如果没有定义显示性质,额赋值为空字符串 if (b || (c == "none")) { //当第2个参数值为true或者元素隐藏时 e.style.display = e._display; //则将调用元素的_display属性值恢复元素或显示元素 } else { e.style.display = "none"; //否则隐藏元素 } }下面在页面中设置一个向右浮动的元素 p。连续调用 3 次 display() 函数后,相当于隐藏元素,代码如下:
<p style="float:right; border:solid 1px red; width:100px; height:100px;">p1</p> <script> var p = document.getElementsByTagName("p")[0]; display(p); //切换隐藏 display(p); //切换显示 display(p); //切换隐藏 </script>按如下方式调用,则会显示元素。
display(p, true); //强制显示
半透明显示
设计元素的不透明度实现方法:IE 怪异模式支持 filters 滤镜集,DOM 标准浏览器支持 style.opacity 属性。它们的取值范围也不同,IE 的 filters 属性值范围为 0~100,其中 0 表示完全透明,100 表示不透明;DOM 标准的 style.opacity 属性值范围是 0~1,其中 0 表示完全透明,100 表示完全不透明。示例
为了兼容不同的浏览器,可以把设置元素透明度的功能进行函数封装。//设置元素的透明度 //参数:e表示要预设置的元素,n表示一个数值,取值范围为 0~100,如果省略,则默认为 100,即不透明显示元素 function setOpacity (e, n) { var n = parseFloat (n); //把第2个参数转换为浮点数 if (n && (n>100) || !n) n = 100; //如果第2个参数大于100,或者不存在,则设置为100 if (n && (n<0)) n = 0; //如果第2个参数存在且小于0,则设置为0 if (e.filters) { //兼容IE浏览器 e.style.filter = "alpha (opacity = " + n + ")"; } else { //兼容DOM标准 e.style.opacity = n / 100; } }在获取元素的透明度时,应注意在 IE 浏览器中不能够直接通过属性获取,而应借助 filters 集合的 item() 方法获取 Alpha 对象,然后读取它的 opacity 属性值。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频