编程 Javascript

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

Posted in Javascript onDecember 16, 2013

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

<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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 子窗体父窗体相互传值方法

May 31 Javascript

jquery 卷帘效果实现代码(不同方向)

Feb 05 Javascript

jquery获取特定name所有选中的checkbox,支持IE9标准模式

Mar 18 Javascript

JS作为值的函数用法示例

Jun 20 Javascript

Bootstrap优化站点资源、响应式图片、传送带使用详解3

Oct 14 Javascript

详解Node.js项目APM监控之New Relic

May 12 Javascript

JavaScript实现音乐自动切换和轮播

Nov 05 Javascript

微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

Dec 06 Javascript

Vue实现点击后文字变色切换方法

Feb 11 Javascript

Vue+Typescript中在Vue上挂载axios使用时报错问题

Aug 07 Javascript

angularjs自定义过滤器demo示例

Aug 24 Javascript

vue+elementui通用弹窗的实现(新增+编辑)

Jan 07 Vue.js

使用apply方法实现javascript中的对象继承

Dec 16 #Javascript

javaScript如何生成xmlhttp

Dec 16 #Javascript

JS onmousemove鼠标移动坐标接龙DIV效果实例

Dec 16 #Javascript

JS实现模仿微博发布效果实例代码

Dec 16 #Javascript

JSON无限折叠菜单编写实例

Dec 16 #Javascript

使用JSLint提高JS代码质量方法分享

Dec 16 #Javascript

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

Dec 16 #Javascript