`
echoetang
  • 浏览: 40329 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript访问修改CSS样式表

阅读更多

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样式表_.docx

    在本文中,我们将深入探讨如何使用 JavaScript 动态修改 CSS 样式表,从而实现对网页外观的实时更新。 首先,我们需要理解 CSS 样式表是如何工作的。CSS(Cascading Style Sheets)用于定义 HTML 或 XML(包括如 ...

    JavaScript修改css样式style

    - `link` 标签可以用来动态加载外部 CSS 文件,JavaScript 可以通过添加或删除 `link` 标签来实现样式表的按需加载或卸载。 8. **CSS-in-JS**: - 这是一种现代前端开发模式,将 CSS 样式直接写入 JavaScript,...

    JavaScript CSS Style属性对照表

    JavaScript访问和修改CSS样式主要通过以下方式: 1. DOM(文档对象模型):JavaScript可以通过DOM API获取和操作HTML元素。例如,`document.getElementById('elementId').style.property`可以获取或设置元素的内联...

    JavaScript动态生成css

    创建了`&lt;style&gt;`元素后,我们可以通过`sheet`属性来访问它的CSS样式表,并添加规则。例如: ```javascript style.sheet.insertRule('.myClass { color: red; }', 0); ``` 这将在样式表中插入一条新的CSS规则,设置...

    《CSS样式表行为手册》中文chm

    9. JavaScript结合:讨论CSS与JavaScript的交互,如使用JavaScript修改CSS样式,以及CSS的`style`属性和`getComputedStyle()`方法。 10. 实战应用:提供实际案例分析和练习,帮助读者将理论知识应用于实际项目。 ...

    javascript 动态修改样式和层叠样式表代码

    在本文中,我们将深入探讨如何使用JavaScript来动态修改元素的样式以及操作CSS样式表。 首先,我们需要了解CSSStyleSheet对象。CSSStyleSheet对象代表了整个CSS样式表,无论是外部引入的还是内嵌在HTML中的标签。...

    用法JavaScript创建新样式表和新样式规章_.docx

    JavaScript 创建新样式表和新样式规章是Web开发中提高页面性能和灵活性的一种技术。通过动态地添加或删除样式表中的规则,而不是逐个修改DOM元素的样式,可以更有效地管理页面样式,尤其在处理大量元素时更为高效。...

    JavaScript CSS修改学习第三章 修改样式表

    总的来说,JavaScript修改CSS样式涉及到理解DOM-CSS接口,处理浏览器差异,以及有效地访问和修改样式规则。这是一项需要细心和技巧的工作,尤其在确保跨浏览器兼容性时。开发者需要对W3C标准和各种浏览器的实现有...

    Node.js-objectify-css将CSS规则转成JavaScript样式对象的CLI工具

    这个工具简化了处理 CSS 样式的过程,尤其适用于需要动态生成或修改样式表的场景,比如在服务器端渲染、CSS-in-JS 模式或者 Webpack 等构建工具中。 使用 `objectify-css`,你可以通过以下步骤将 CSS 文件转换为 ...

    Javascript和Css属性对照

    将 JavaScript 与 CSS 相结合,可以实现动态样式修改。通过 JavaScript 的 DOM 操作,我们可以实时改变元素的 CSS 属性。例如: ```javascript let myElement = document.querySelector('#myElement'); myElement....

    用JavaScript动态建立或增加CSS样式表的实现方法

    在网页开发中,JavaScript是一种强大的工具,它不仅能够处理用户交互,还能动态地改变页面的样式,这其中包括动态创建或增加CSS样式表。本篇文章将详细介绍两种使用JavaScript实现这一功能的方法。 ### 方法一:...

    JavaScript访问CSS属性的几种方式介绍_.docx

    JavaScript访问CSS属性主要涉及两种方式:通过元素访问和直接访问样式表,以及一个重要的概念——运行时样式。这两种方法在JavaScript中用于动态操作网页样式,提供了丰富的可能性。 1. **通过元素访问** 这种方式...

    DOM对象手册+CSS样式表+JS特效

    **CSS样式表** Cascading Style Sheets(CSS)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。CSS手册包含以下核心概念: 1. 选择器与规则集:通过选择器(如ID,类,标签名)来定位元素...

    明仔中文网の万能换CSS样式 v3.0.rar

    在JavaScript的世界里,CSS(层叠样式表)是用于控制网页元素呈现的关键技术。通过修改CSS,我们可以改变网页的颜色、布局、字体等视觉效果。而这款万能换肤程序正是利用了这一特性,允许用户根据个人喜好定制和切换...

    CSS样式表在WEB开发中有哪些作用?.docx

    CSS(Cascading Style Sheets)样式表在Web开发中扮演着至关重要的角色,它主要具有以下五大作用: 1. **格式与结构分离**:CSS的出现使得网页的结构(HTML)和表现(样式)得以分开。HTML专注于内容的组织和语义化...

    CSS层叠样式表在DHTML中的应用

    6. **增强脚本交互**:在DHTML中,JavaScript可以轻松操作CSS样式,实现动态效果。例如,通过改变元素的`style`属性,可以实现动画、过渡和变形等效果。 7. **布局控制**:CSS提供了盒模型、网格系统和Flexbox布局...

    CSS 和 JavaScript 标签 style 属性对照表

    从给定的文件信息来看,我们探讨的主题是CSS与JavaScript在网页设计中的应用,特别是如何通过style属性在JavaScript中直接操作CSS样式。以下是对标题、描述以及部分代码内容的深入解析,旨在阐述CSS和JavaScript之间...

    CSS+div、css2.0中文样式表帮助手册、dhtml手册

    - DOM操作:通过JavaScript访问和修改DOM树,实现元素的选择、添加、删除等。 4. JavaScript: JavaScript是一种轻量级的脚本语言,广泛应用于网页和服务器端编程。在前端,JavaScript主要负责: - 表单验证:...

Global site tag (gtag.js) - Google Analytics