JavaScript访问修改样式表,可以方便的动态修改页面:
一、访问元素中style属性的CSS样式
这个可以直接使用style对象方便的访问,例如:
<div id = "mdiv" style="background-color:blue;">....</div>
访问CSS的方法是:
<script type="text/javascript">
//获得元素
var oDiv = document.getElementyId("mdiv");
//访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值
alert(oDiv.style.backgroundColor);
</script>
二、访问外部定义的CSS样式(类定义的CSS样式)
这个没法使用上面的方法去访问,因为CSS数据不是存储在style属性中,它是存储在类中的。
访问方法:先取得定义类的样式表的引用,用document.styleSheets集合实现这个目的,这个集合包含HTML页面中所有的样式表,DOM为每个样式表定义一个cssRules的集合,这个集合中包含定义在样式表中的所用CSS规则(注意:Mozilla和Safasi中是cssRules,而IE中式rules)。
例如:
<style>
/*第一条规则*/
div.ss{
background-color:red;
width:101px;
}
/*第二条规则*/
a.btn2{
background:url(imag/2-AccessCtl.jpg);
}
</style>
访问CSS:
var ocssRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
//访问第一条规则
alert(ocssRules[0].style.backgroundColor);
//设置值
ocssRules[0].style.width = "992px";
//访问第二条规则
alert(ocssRules[1].style.background);
//设置值
ocssRules[0].style.background = "url(imag/3-back.jpg);";
以上是我用到的时候一些简单的应用,具体深入的使用可以参看《JavaScript高级程序设计》中DOM技术部分
By:Gxmis-alextang
分享到:
相关推荐
在本文中,我们将深入探讨如何使用 JavaScript 动态修改 CSS 样式表,从而实现对网页外观的实时更新。 首先,我们需要理解 CSS 样式表是如何工作的。CSS(Cascading Style Sheets)用于定义 HTML 或 XML(包括如 ...
- `link` 标签可以用来动态加载外部 CSS 文件,JavaScript 可以通过添加或删除 `link` 标签来实现样式表的按需加载或卸载。 8. **CSS-in-JS**: - 这是一种现代前端开发模式,将 CSS 样式直接写入 JavaScript,...
JavaScript访问和修改CSS样式主要通过以下方式: 1. DOM(文档对象模型):JavaScript可以通过DOM API获取和操作HTML元素。例如,`document.getElementById('elementId').style.property`可以获取或设置元素的内联...
创建了`<style>`元素后,我们可以通过`sheet`属性来访问它的CSS样式表,并添加规则。例如: ```javascript style.sheet.insertRule('.myClass { color: red; }', 0); ``` 这将在样式表中插入一条新的CSS规则,设置...
9. JavaScript结合:讨论CSS与JavaScript的交互,如使用JavaScript修改CSS样式,以及CSS的`style`属性和`getComputedStyle()`方法。 10. 实战应用:提供实际案例分析和练习,帮助读者将理论知识应用于实际项目。 ...
在本文中,我们将深入探讨如何使用JavaScript来动态修改元素的样式以及操作CSS样式表。 首先,我们需要了解CSSStyleSheet对象。CSSStyleSheet对象代表了整个CSS样式表,无论是外部引入的还是内嵌在HTML中的标签。...
JavaScript 创建新样式表和新样式规章是Web开发中提高页面性能和灵活性的一种技术。通过动态地添加或删除样式表中的规则,而不是逐个修改DOM元素的样式,可以更有效地管理页面样式,尤其在处理大量元素时更为高效。...
总的来说,JavaScript修改CSS样式涉及到理解DOM-CSS接口,处理浏览器差异,以及有效地访问和修改样式规则。这是一项需要细心和技巧的工作,尤其在确保跨浏览器兼容性时。开发者需要对W3C标准和各种浏览器的实现有...
这个工具简化了处理 CSS 样式的过程,尤其适用于需要动态生成或修改样式表的场景,比如在服务器端渲染、CSS-in-JS 模式或者 Webpack 等构建工具中。 使用 `objectify-css`,你可以通过以下步骤将 CSS 文件转换为 ...
将 JavaScript 与 CSS 相结合,可以实现动态样式修改。通过 JavaScript 的 DOM 操作,我们可以实时改变元素的 CSS 属性。例如: ```javascript let myElement = document.querySelector('#myElement'); myElement....
在网页开发中,JavaScript是一种强大的工具,它不仅能够处理用户交互,还能动态地改变页面的样式,这其中包括动态创建或增加CSS样式表。本篇文章将详细介绍两种使用JavaScript实现这一功能的方法。 ### 方法一:...
JavaScript访问CSS属性主要涉及两种方式:通过元素访问和直接访问样式表,以及一个重要的概念——运行时样式。这两种方法在JavaScript中用于动态操作网页样式,提供了丰富的可能性。 1. **通过元素访问** 这种方式...
**CSS样式表** Cascading Style Sheets(CSS)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。CSS手册包含以下核心概念: 1. 选择器与规则集:通过选择器(如ID,类,标签名)来定位元素...
在JavaScript的世界里,CSS(层叠样式表)是用于控制网页元素呈现的关键技术。通过修改CSS,我们可以改变网页的颜色、布局、字体等视觉效果。而这款万能换肤程序正是利用了这一特性,允许用户根据个人喜好定制和切换...
CSS(Cascading Style Sheets)样式表在Web开发中扮演着至关重要的角色,它主要具有以下五大作用: 1. **格式与结构分离**:CSS的出现使得网页的结构(HTML)和表现(样式)得以分开。HTML专注于内容的组织和语义化...
6. **增强脚本交互**:在DHTML中,JavaScript可以轻松操作CSS样式,实现动态效果。例如,通过改变元素的`style`属性,可以实现动画、过渡和变形等效果。 7. **布局控制**:CSS提供了盒模型、网格系统和Flexbox布局...
从给定的文件信息来看,我们探讨的主题是CSS与JavaScript在网页设计中的应用,特别是如何通过style属性在JavaScript中直接操作CSS样式。以下是对标题、描述以及部分代码内容的深入解析,旨在阐述CSS和JavaScript之间...
- DOM操作:通过JavaScript访问和修改DOM树,实现元素的选择、添加、删除等。 4. JavaScript: JavaScript是一种轻量级的脚本语言,广泛应用于网页和服务器端编程。在前端,JavaScript主要负责: - 表单验证:...