JS修改css样式style浅谈

转载 2013年12月03日 13:48:23
分为改变直接样式,改变className和改变cssText三种,需要的朋友可以参考下
一、局部改变样式
分为改变直接样式,改变className和改变cssText三种。需要注意的是:
注意大小写:
javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。
调用方法:
如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.className=”…”的写法是错误的!只能写成:document.getElementById('obj').className=”…”
改变cssText
但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById('obj').style.cssText=”…”
改变直接样式我就不必说了,大家记得要写到具体样式即可,如
document.getElementById('obj').style.backgroundColor=”#003366″
二、全局改变样式
通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
调用时很简单,如
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。
基础知识
通常在网页中样式表的调用方法有三种。
第一种:链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
<head> 
<title>文档标题</title> 
<link rel=stylesheet href="http://www.jb51.net/demo.css" type="text/css"> 
</link> 
</head>
而在XML中,你应该如下例所示在声明区中加入:
< ? xml-stylesheet type="text/css" href="http://www.jb51.net/dhtmlet.css" ?>
第二种:定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的和标记之间插入一个块对象。

定义方式请参阅样式表语法。示例如下:

<html> 
<head> 
<title>文档标题</title> 
<style type="text/css"> 
<!-- 
body {font: 10pt "Arial"} 
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
p {font: 10pt/12pt "Arial"; color: black} 
--> 
</style> 
</head> 
<body> 
</body>
</html>
请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。
第三种:内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>


原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式2;css表达式3  "的方式直接更改...
  • qq_31984915
  • qq_31984915
  • 2016年11月06日 12:45
  • 4555

JS修改css样式style浅谈(转)

原文地址:http://www.aichengxu.com/article/Javascript/620_7.html 一、局部改变样式 分为改变直接样式,改变className和改变...
  • nono4909
  • nono4909
  • 2013年07月05日 14:10
  • 513

CSS 样式修改 积累

背景色渐变 .gradient { background: #BCE8F1; background: -moz-linear-gradient(top, #BCE8F1 0%, #36...
  • u014010798
  • u014010798
  • 2016年01月13日 10:47
  • 991

jQuery动态设置样式(style、css)

一、jQuery设置css样式 测试jQuery动态获取padding-left 1、用css()方法返回元素的一个或多个样式属性 $("div").css("padding-left")); ...
  • xiaoyuncc
  • xiaoyuncc
  • 2017年04月27日 15:54
  • 11513

ie8:js  添加样式

js 控制在 head 标签中 引入 ie8 的专门css文件,样式是读取不进入的。 解决办法: head  标签中添加style样式,style样式中js调控样式 ...
  • zjl199303
  • zjl199303
  • 2017年04月06日 14:51
  • 529

js外部样式和style属性的添加移除

在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用...
  • mafan121
  • mafan121
  • 2015年05月19日 09:31
  • 20124

JS获取CSS样式(style/getComputedStyle/currentStyle)

CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。 外部样式表:如果很多网页需要用到同样的样式(...
  • liuyan19891230
  • liuyan19891230
  • 2015年11月22日 13:25
  • 5123

javascript 动态设置样式style

动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript...
  • limlimlim
  • limlimlim
  • 2012年12月25日 13:03
  • 15647

JS通过.style.属性修改对象样式的可行度分析

1.内嵌样式 html: JS: var divs=document.getElementsByTagName('div'); ...
  • sinat_16463137
  • sinat_16463137
  • 2016年12月23日 19:40
  • 462

mui使用的css样式以及js

mui使用的css样式以及js参见:https://github.com/dcloudio/mui/tree/master/dist
  • HH1778981113
  • HH1778981113
  • 2018年01月20日 17:50
  • 102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS修改css样式style浅谈
举报原因:
原因补充:

(最多只允许输入30个字)