JavaScript修改css样式style_javascript技巧

一、局部改变样式
分为改变直接样式,改变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>

时间: 2024-10-30 18:32:05

JavaScript修改css样式style_javascript技巧的相关文章

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

 修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的 一.局部改变样式  分为改变直接样式,改变className和改变cssText三种.需要注意的是:  注意大小写:  javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果.  调用方法:  如果改变class

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

一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

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

看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

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

在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

JavaScript改变CSS样式的方法汇总

  JavaScript修改CSS有4种方法:1.修改节点style(内联样式);2.改变节点class或id;3.写入新的css;4.替换页面中的样式表.今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用 JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的css; 替换页面中的样式表. 个人不

javascript在css样式中获取样式

问题描述 javascript在css样式中获取样式 <link href="beijingyangse.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript"> /*本函数的功能是判断浏览器的内核*/ function chank(enval) { var enval = enval.v

js-看图 当复选框勾上就 修改css 样式 变成不可见 我改了 好多次

问题描述 看图 当复选框勾上就 修改css 样式 变成不可见 我改了 好多次 看图 当复选框勾上就 修改css 样式 变成不可见 我要改为当它勾上的时候变成只读状态 我改了好多次 一直不成功 readonly="true" background:expression(this.readOnly=true) 这些都没效果 请问怎么做??? 解决方案 设置disabled属性,MyCheckbox.disabled = true 解决方案二: displa : none;

jquery修改css样式函数

下面提供一款jquery修改css样式函数,他可以修改text password submit reset button radio textarea checkbox file以及focus  blur 事件等. */ $(document).ready(function(){  $("input[type='text']").addclass('input_blur');  $("input[type='password']").addclass('input_

javascript清理table样式_javascript技巧

项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table.tr.td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性. html部分代码如下: <p class="MsoNormal" align="left" style="text-align:le