`
mw666666
  • 浏览: 23917 次
  • 性别: Icon_minigender_1
  • 来自: 保定
社区版块
存档分类
最新评论

JS修改CSS的定义

    博客分类:
  • js
阅读更多
当需要批量修改某些元素的样式时,可以直接用JS修改CSS的定义
<style type="text/css">
div{
   height:300px;
   width:300px;
   border:1px #003399 solid;
   background-color:#006633;
}
</style>

<script language="JavaScript" type="text/javascript">
if(document.all){//兼容IE
   document.styleSheets[0].rules[0].style.height="100px";
}else{//兼容firefox
   document.styleSheets[0].cssRules[0].style.height="100px";
}
//alert(document.getElementsByTagName('style')[0].innerHTML);
</script>


写成函数,由于样式名只能用数字来索引,所以用了DOM遍历(此函数来源于:http://tb.blog.csdn.net/TrackBack.aspx?PostId=1885195)
<style>
.exampleA{}
.exampleB{}
</style>
<script>
function changecss(theClass,element,value) {
var cssRules;
if (document.all) {
   cssRules = 'rules';
}
else if (document.getElementById) {
   cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
   for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
    if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
     document.styleSheets[S][cssRules][R].style[element] = value;
    }
   }
}
}
</script>

<span A</span>
<span B</span>
<span A</span>
<input type="button" value="Change A Red" onclick="changecss('.exampleA','color','red')"/><input type="button" value="Change A Black" onclick="changecss('.exampleA','color','black')"/>
分享到:
评论

相关推荐

    JavaScript修改css样式style

    JavaScript 修改 CSS 样式是 Web 开发中常见且重要的技能,尤其在动态更新页面样式时。这篇博文(链接已提供)可能深入探讨了如何利用 JavaScript 操作 DOM 元素的 style 属性来改变 CSS 样式。以下是关于这个主题的...

    js改变css样式

    JavaScript(简称JS)和CSS是Web开发中的两个关键技术,它们分别负责网页的交互逻辑与样式设计。在本文中,我们将深入探讨如何使用JavaScript来动态地改变CSS样式,以实现如标题所示的效果——通过页面JS事件改变...

    天地图-离线地图使用的js和css

    "天地图-离线地图使用的js和css"这个主题涉及到的是如何在内网环境中使用天地图服务,通过修改过的源码实现离线访问。天地图是中国的一个权威地理信息系统,提供了丰富的地图数据服务,包括基础地图、卫星图像、地形...

    JS和CSS和C++互相调用

    要实现CSS与JS的交互,通常需要通过JS修改CSS变量或利用CSS @rules(如@keyframes)触发JS事件。 C++在Web开发中的角色主要体现在浏览器内核和高性能的Web组件上。Webkit是一个开源的浏览器渲染引擎,由C++编写,它...

    Video需要的js和css文件

    2. **video-js.css**:这是Video.js播放器的样式表文件,用于定义视频播放器的外观和布局。通过修改或扩展这个CSS文件,开发者可以根据自己的需求定制播放器的颜色、大小、按钮样式等视觉元素,使其与网站的整体设计...

    包含js与css分享

    例如,JS可以监听用户事件,然后通过修改CSS属性来改变元素的样式,实现动态效果。在“一种大致模板”中,可能有一个预定义的CSS样式,而JavaScript则根据用户操作动态地调整这些样式。 为了实现这些特效,开发者...

    学生信息管理系统(html + js + css)

    总结来说,"学生信息管理系统(html + js + css)"是一个集成了HTML结构、CSS样式和JavaScript交互的实例,它充分展示了前端技术在实际项目中的应用,是学习和提升Web开发技能的理想平台。通过这样的项目实践,开发者...

    js+css3图片3D旋转轮播特效

    JavaScript可以监听用户的交互事件,比如点击按钮,然后通过修改CSS3的样式属性来改变元素的状态,实现图片的切换。同时,JavaScript还可以设置定时器,实现图片的自动轮播,增加用户的沉浸感。 在实际实现过程中,...

    精品 js+css布局

    "精品 js+css布局" 提供了一种利用JavaScript和CSS实现自动化布局的方法,这在现代网页开发中是一个非常实用的技术。下面我们将深入探讨这个主题。 首先,CSS(层叠样式表)是网页设计中的样式语言,负责定义元素的...

    webview 加载js ,css

    下面我们将深入探讨如何在Android的WebView中加载和使用JS、CSS以及它们带来的优势。 1. Android WebView加载HTML Android的WebView可以通过调用`loadData()`或`loadDataWithBaseURL()`方法加载HTML字符串,或者...

    JS+CSS个性的产品图片+简介展示效果

    同时,为了调试和优化,可以使用浏览器的开发者工具(如Chrome的DevTools)来实时查看和修改CSS和JS代码,观察页面元素的变化,以便更好地理解和改进代码。 总的来说,"JS+CSS个性的产品图片+简介展示效果"是一个...

    html+JS+CSS特效资料

    JavaScript(JS)则是赋予网页动态功能的关键,它可以响应用户的交互,改变网页内容,甚至与服务器进行数据交换。例如,通过`addEventListener`函数可以添加点击事件,`innerHTML`属性可以修改元素的内容,`AJAX`...

    HTML+CSS+JS 网页设计模板.zip

    每个模板通常会包含HTML文件(.html)、CSS文件(.css)和JavaScript文件(.js),有时还会包含图像和其他资源文件。 在使用这些模板时,开发者可以根据需求修改HTML元素以调整内容,通过调整CSS样式来定制界面,...

    原生javascript实现css属性的set和get

    频繁地通过JavaScript修改CSS属性可能会对性能产生影响。为了优化,可以考虑以下策略: 1. 使用CSS动画和过渡,让浏览器自动处理渲染。 2. 将多个样式变化合并到一起,减少DOM操作次数。 3. 使用CSS预处理器(如...

    原生js和css实现3D波浪效果图

    "原生js和css实现3D波浪效果图"是一个这样的项目,它利用JavaScript和CSS这两种强大的技术来构建具有三维立体感的波浪动画效果。下面将详细探讨这个项目中涉及的主要知识点。 首先,CSS(层叠样式表)在实现3D视觉...

    sweetAlert弹窗文件 JS和CSS

    这个压缩包包含的文件主要是JS(JavaScript)和CSS(层叠样式表)文件,用于实现SweetAlert的功能。 在前端开发中,用户界面的交互体验是非常重要的,而传统的alert对话框样式单一,无法满足现代网页设计的需求。...

    html+js+css 工人信息管理功能(增删改查)前端实现,不连数据库

    在本项目中,我们主要探讨的是使用HTML、JavaScript(JS)和CSS这三种核心技术来实现一个工人信息管理系统,特别强调了前端部分的功能实现,不涉及与数据库的交互。以下是这个项目涉及的关键知识点: 1. HTML基础:...

    easyUi js+css

    "easyUi js+css" 提供了 easyui 的 JavaScript 和 CSS 文件,方便开发者直接在项目中引用,无需自行构建。 1. **EasyUI 框架概述** EasyUI 是一套轻量级的前端开发工具,它简化了网页布局和交互设计,通过预定义的...

    js_css_image

    在IT行业中,JavaScript (js) 和 Cascading Style Sheets (css) 是构建网页和Web应用程序的两个核心元素。本文将深入探讨“js_css_image”压缩包中的相关知识点,重点关注`datatable editor`资源,以及它们如何与CSS...

    js中的css理解

    JavaScript可以读取和修改CSS变量。这些变量定义在`:root`选择器下或特定元素上,通过`element.style.getPropertyValue()`和`element.style.setProperty()`来操作。 ```javascript var primaryColor = ...

Global site tag (gtag.js) - Google Analytics