`
aerchi
  • 浏览: 419538 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
文章分类
社区版块
存档分类
最新评论

JavaScript修改css样式style

 
阅读更多

一、局部改变样式
分为改变直接样式,改变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.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/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>
详细出处参考:http://www.jb51.net/article/14178.htm

分享到:
评论

相关推荐

    JavaScript修改css样式style动态改变元素样式

    调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....

    JavaScript改变CSS样式的方法汇总

    JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。 JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的...

    javascript动态设置样式style实例分析

    本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性...

    javascript 动态修改css样式方法汇总(四种方法)

    在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性...

    JS修改css样式style浅谈

    调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....

    Javascript改变CSS样式(局部和全局)

    一、局部改变样式 有三种方法:直接改变样式、改变className和改变cssText 改变className: document.getElementById(‘obj’).className=”…” 改变cssText:document.getElementById(‘obj’).style.cssText=”...

    如何用JavaScript实现动态修改CSS样式表

    看过我写的《用JavaScript动态建立或增加CSS样式表的实现方法》之后,你就很容易想明白如何修改CSS样式表了。 正好今天在论坛碰到一位朋友问这样的一个问题: &lt;style&gt; .ls{width=120px;} &lt;/style&gt; ...

    原生JS实现获取及修改CSS样式的方法

    本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法...

    js树代码 css样式实现

    js树代码 css样式实现 &lt;script type="text/javascript"&gt; &lt;!-- function hideAll() { for(i=0;i;i++) { dh_list_1[i].style.display="none"; } } function showObjcD(num) { var y = event.screenY; if ...

    原生javascript实现读写CSS样式的方法详解

    可能大家一说起操作css样式,很多人都会想到jQuery的css方法:$(selector).css(name) ,但是有思考过如何使用原生js来实现类似的功能么? 大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法...

    html+css+javascript 教程

    CSS—Cascade Style Sheet层叠样式表 1998/5/12,CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点: 样式表由样式规则组成,以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符---通常是一个HTML的...

    CSS对象教程检索下载

    CSS样式表是对HTML标签的外观进行定义,几乎所有的HTML标签都有Class属性和Style属性 CSS操作 HTML中与CSS相关的标签属性 class属性 style属性 同时包含有class属性和style属性 标签将使用class和style属性指定的...

    你未必知道的JavaScript和CSS交互的5种方法

    用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也可以访问页面中的伪元素。 代码如下:...

    javascript获取元素CSS样式代码示例

    如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性,下面我们看看javascript如何获取元素CSS样式

Global site tag (gtag.js) - Google Analytics