热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

通过javascript设置css属性的代码

通过javascript设置css属性的方法需要的朋友可以参考下。

1.透明度:
如果没有为一个文本指定一个背景颜色或者一个背景图像,那么这个元素的背景通常是透明的。
这一点很重要,如果一个绝对定位的且带有文本的元素放在一个有文本的元素之上,那么将会十分的混乱,那么我们就可以通过设置背景图片或者背景颜色来进行遮盖,如果必须的话我们可以将其显示的设置为"transparent"(透明的)
通用的设置透明元素通用的css如下:

代码如下:

opacity:.75;//ff new
-moz-opacity:.75;// transparency for older Mozillas
filter:Alpha(opacity=75);//for IE

2.带有连字符的css:
骆驼式命名:
代码如下:

element.style.fOntFamily= "sans-serif";
element.style.borderLeftWidth = "5px";
element.style.zIndex = 100;

3.注意的地方:
代码如下:

var padding_left = 50;
element.style.left = padding_left + "px";//不要忘记加单位
var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin + "px" + rigntMargin + "px" + bottomMargin + "px" + leftMargin + "px";

4.设置float
代码如下:

element.style.cssFloat = "left";//firefox chrome opera
element.style.styleFloat = "left";//IE


推荐阅读
  • CSS3 鼠标样式详解:cursor: not-allowed 禁止手势
    本文详细介绍了 CSS3 中的 `cursor: not-allowed` 属性,该属性用于在用户无法执行特定操作时显示一个禁止手势。此外,还探讨了如何通过结合 `pointer-events: auto!important;` 来增强用户体验。 ... [详细]
  • 移动端浏览器为了识别用户的双击放大操作,通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉,但对于需要即时响应的应用(如网页游戏)来说,消除这一延迟至关重要。 ... [详细]
  • 使用CSS与HTML构建动态图片墙
    本文介绍如何利用CSS和HTML创建一个动态响应的图片墙,特别适合在Firefox和Chrome浏览器中查看。通过简单的鼠标交互,用户可以放大浏览图片。 ... [详细]
  • 本文探讨了Node.js后端开发的基础知识,包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 随着各大机构逐步统一浏览器标准,不同浏览器间的转换需求日益突出。本文探讨了一种通过自定义浏览器协议,在现有系统中实现从一个浏览器无缝跳转至另一浏览器的方法。 ... [详细]
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 本文旨在介绍一系列提升工作效率的浏览器插件和实用小工具,帮助用户在日常工作中更加便捷高效。内容由原作者授权发布。 ... [详细]
  • index.js全部js兼容性处理。js内引入babelpolyfill全部js兼容性处理。babelpolyfillimportbabelpolyfill;constadd ... [详细]
  • 本文详细介绍了跨站脚本攻击(XSS)的基本概念、工作原理,并通过实际案例演示如何构建XSS漏洞的测试环境,以及探讨了XSS攻击的不同形式和防御策略。 ... [详细]
  • Python Selenium WebDriver 浏览器驱动详解与实践
    本文详细介绍了如何使用Python结合Selenium和unittest构建自动化测试框架,重点解析了WebDriver浏览器驱动的配置与使用方法,涵盖Chrome、Firefox、IE/Edge等主流浏览器。 ... [详细]
author-avatar
帕皮丝汀阿奎莱拉
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有