繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript修改css样式style
- Javascript
- javascript实现的鼠标链接提示效果生成器代码
- javascript实现动态CSS换肤技术的脚本
- 一个即时表单验证的javascript代码
- javascript之dhDataGrid Ver2.0.0代码
- syntaxhighlighter 使用方法
- 建立良好体验度的Web注册系统ajax
- 抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
- JTrackBar水平拖动效果
- 用JTrackBar实现的模拟苹果风格的滚动条
- 非常不错的javascript 图片慢慢下层效果
- 网上应用的一个不错common.js脚本
- alixixi runcode.asp的代码不错的应用
- 用javascript实现点击链接弹出"图片另存为"而不是直接打开
- 用javascript实现给图片加链接
- document.styleSheets[0].rules 与 cssRules区别
- javascript 控制超级链接的样式代码
- 一个刚完成的layout（拖动流畅，不受iframe影响）
- 写了一个layout，拖动条连贯，内容区可为iframe
- 用JS实现网页元素阴影效果的研究总结
- js下在password表单内显示提示信息的解决办法
Javascript 中的 JavaScript修改css样式style
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 58 ::
收藏到网摘: n/a
用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>
评论 (0) All
