以下先记录一下JS控制CSS所使用的方法.

1.使用javascript更改某个css class的属性...

<style type="text/css"> 
.orig { 
display: none; 

</style> 
你想要改变把他的display属性由none改为inline。 
解决的方法: 在IE里:

document.styleSheets[0].rules[0].style.display = "inline"; 
在firefox里:

document.styleSheets[0].cssRules[0].style.display = "inline"; 
讨论: 能够做一个函数来搜索特定名字的style对象:

关于rules和cssRules的浏览器兼容性,本人博文有測试记录:http://blog.csdn.net/u011043843/article/details/28276757

function getstyle(sname) {
for (var i=0;i<document.styleSheets.length;i++) {
var rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
} else {
rules = document.styleSheets[i].rules;
}
for (var j=0;j<rules.length;j++) {
if (rules[j].selectorText == sname) {
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正
return rules[j].style;
}
}
}
} 

然后仅仅要:

getstyle(".orig").display = "inline";

就能够了。

------------------ 注意 document.styleSheets[0].rules[0].style 这个 styleSheets[0]数组的下标是代表本页的第N个CSS样式表,它的下级rules[0]的数组下标表示的则是这个样式表中的第N个样式,比如: 
<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style> 
改动S则: document.styleSheets[0].rules[0].style.display='inline'; 
改动W则:document.styleSheets[0].rules[1].style.display = 'inline'; 
注意:CSS和HTML结合的方式必须为<LINK rel="stylesheet" type="text/css" href="" /> 或<style></style>的时候以上方法可行,如@IMPORT 则不行.

====================================

以下记录一下JS訪问CSS中的样式: 
用javascript获取和设置style

DOM标准引入了覆盖样式表的概念,当我们用document.getElementById("id").style.backgroundColor 获取样式时 获取的仅仅是id中style属性中设置的背景色,假设id中的style属性中没有设置background-color那么就会返回空,也就是说假设id用class属性引用了一个外部样式表,在这个外部样式表中设置的背景色,那么不好意思

document.getElementById("id").style.backgroundColor 这样的写法不好使,假设要获取外部样式表中的设置,须要用到window对象的getComputedStyle()方法,代码这样写window.getComputedStyle(id,null).backgroundColor

可是兼容问题又来了,这么写在firefox中好使,但在IE中不好使 
两者兼容的方式写成 
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"]; 
假设是获取背景色,这样的方法在firefox和IE中的返回值还是不一样的,IE中是返回"#ffff99"样子的,而firefox中返回"rgb(238, 44, 34) " 
值得注意的是:window.getComputedStyle(id,null)这样的方式不能设置样式,仅仅能获取,要设置还得写成类似这样id.style.background="#EE2C21"; 
在IE中CURRENTSTYLE仅仅能以仅仅读方式获取样式.

用JavaScript改动CSS属性

仅仅有写原生的javascript了。

1.用JS改动标签的 class 属性值:

class 属性是在标签上引用样式表的方法之中的一个,它的值是一个样式表的选择符,假设改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种改动方法。

更改一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串; 
document.getElementById( id ) 用于获取标签相应的 DOM 对象,你也能够用其他方法获取。className 是 DOM 对象的一个属性,它相应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

利用这样的办法能够把标签的CSS样式表替换成另外一个,也能够让一个没有应用CSS样式的标签应用指定的样式。

举例:

<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临!</div>
<p><button οnclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script> 

2.用JS改动标签的 style 属性值: 
style 属性也是在标签上引用样式表的方法之中的一个,它的值是一个CSS样式表。DOM 对象也有 style 属性,只是这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一相应的,当改变了 Style 对象的属性时,相应标签的 CSS 属性值也就改变了,所以这属于另外一种改动方法。

更改一个标签的 CSS 属性的代码是:

<div id="t2">欢迎光临!</div>
<p><button οnclick="setSize()">大小</button>
<button οnclick="setColor()">颜色</button>
<button οnclick="setbgColor()">背景</button>
<button οnclick="setBd()">边框</button>
</p>
<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script> 

document.getElementById( id ).style.属性名 = 值; 
document.getElementById( id ) 用于获取标签相应的 DOM 对象,你也能够用其他方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相相应的。

说明:这样的方法改动的单一的一个CSS属性,它不影响标签上其他CSS属性值。

举例:

javascript操作html元素CSS属性相关推荐

  1. jq追加html属性,jQuery 操作 HTML 元素和属性的方法

    jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val()方法 My Test JQuery $( ...

  2. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  3. JavaScript操作DOM元素

    查询: ①.标准DOM操作API: document.getElementById("id"). document.getElementsByTagName("div&q ...

  4. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  5. html5文本缩进元素,CSS属性参考 | text-indent

    CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...

  6. JavaScript操作HTML 元素

    有三种方法来做这件事: 通过 id 找到 HTML 元素 通过标签名找HTML 元素 通过类名找到 HTML 元素 通过 id 查找 HTML 元素 在DOM 中查HTML 元素的最简单的方法,是通过 ...

  7. Javascript 操作元素Class属性的问题

    我在一个Javascript操作Dom元素的class属性改变其样式,使用的方法是首先使用getElementById方法获得Dom元素.然后使用Dom.setAttribute("clas ...

  8. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...

  9. jQuery操作页面元素属性和内容

    操作页面元素的属性 A $("#bu1").click(function(){ //获得元素对象 var tex=$("#inp1"); //获得元素对象的属性 ...

最新文章

  1. Github+Gitlb的使用
  2. 【微信小程序】跳转到另一个微信小程序
  3. [Leetcode][第32题][JAVA][最长有效括号][动态规划][栈][正向逆向结合]
  4. linux服务器监控zabbix,Linux监控之--使用ZABBIX监控web服务器
  5. Nodejs之view中的视图模板之——EJS模板语言,快速入门
  6. 嵌入式系统——曼彻斯特编码
  7. Android MTK 6763 User 版本默认打开usb调试
  8. Python初级入门精讲-王大鹏-专题视频课程
  9. Compose Modifier修饰符详细解说
  10. 云数据库RDS与自建数据库相比到底有什么优势?
  11. 碳足迹软件市场现状研究分析-
  12. Maven中打胖包和瘦包
  13. crontab巨坑问题
  14. 将word文档中已批注的名字改为自己想要的
  15. 电子MES生产管理系统,车间条码生产管理系统解决方案
  16. 在线选座位 html5,在线选座须知
  17. bigemap如何转换成北京54坐标系?
  18. Java求生之路--迷你DVD管理器
  19. 三国志战略版:Daniel_主将甘宁-会心队伍的探讨
  20. Visio画组织结构

热门文章

  1. java圆饼图插件_饼图----插件
  2. oracle中的greatest,ORACLE 内置函数之 GREATEST 和 LEAST(转)
  3. 苍溪师范94级计算机与文秘专业就业前景,文秘专业就业前景
  4. visual studio 设计器不显示_面向国际市场的装置开发运维软件设计与实现
  5. matlab非线性回归delta,讲解:Delta-sigma、Matlab、analog-to-digital、MatlabPython|SQ
  6. 中国医科大学计算机在线作业,中国医科大学《计算机应用基础》在线作业及参考 答案.doc...
  7. 为什么苹果内购总是失败_苹果官网送货流程将改革,最快次日达丨iPhone6s 等钉子户终于要换手机了...
  8. HTML lt strong gt 标签,HTML lt;legendgt; 标签
  9. linux培训机构 网络班,Linux基础教程之网络基础知识与Linux网络配置
  10. Docker默认网络管理