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样式style浅谈(转)

原文地址:http://www.aichengxu.com/article/Javascript/620_7.html 一、局部改变样式 分为改变直接样式,改变className和改变...

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

CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。 外部样式表:如果很多网页需要用到同样的样式(...

JavaScript修改css样式style

用JavaScript修改网页样式 一、局部改变样式 分为改变直接样式,改变className和改变cssText三种。需要注意的是: 注意大小写: javascript对大小写十分敏感,cl...

js改变style样式和css样式

js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: Change.html ...
  • youyajie
  • youyajie
  • 2012年10月07日 21:47
  • 215560

浅谈CSS样式

CSS全称为“层叠样式表 (CascadingStyle Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 如下列代码: p{ font-siz...
  • csdn_ds
  • csdn_ds
  • 2017年07月10日 01:05
  • 110

php开发之js修改页面css样式

在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过js修改页面的样式,觉得有必要和大家分享下。 test.html ...

js修改css样式表解析(转)

abc.css CSS code .class1 { width:10px; background-color: red; } HTML code Ne...

css样式中的class,style与id的优先级问题

在写css样式的时候我们要注意的有顺序问题,更重要的时候style,class与id之间的优先级问题,在页面初次完工未经改变,或者页面复杂程度很小的时候,搞不清楚这三者之间的优先级问题,似乎并没有什么...

jquery设置css样式、style属性 示例

css虽然会在一开始我们就定义好了,但是有很多场景需要我们动态设置css,或者单独修改一个dom控件的style属性,今天分享一下我总结的jquery设置css及style样式的方法。 一、CSS ...
  • luyaran
  • luyaran
  • 2016年11月14日 15:52
  • 13582

HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)

简介:   font-family 设置字体系列。   font-size 设置字体的尺寸。   font-style 设置字体风格。   font-variant 以小型大写字体或者正常字体显...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS修改css样式style浅谈
举报原因:
原因补充:

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