JS修改css样式style浅谈


Posted in Javascript onMay 06, 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,如

<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="https://3water.com/demo.css" type="text/css"> 
</link> 
</head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="https://3water.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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JS实现div居中示例
Apr 17 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Yii配置文件用法详解
2014/12/04 PHP
php上传excel表格并获取数据
2017/04/27 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
JavaScript 绘制饼图的示例
2021/02/19 Javascript
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
简单了解python代码优化小技巧
2019/07/08 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python import 上级目录的导入
2020/11/03 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
毕业生找工作的自我评价
2013/10/18 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
中学生自我评价2015
2015/03/03 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
护士实习自荐信
2015/03/06 职场文书
倡议书范文大全
2015/04/28 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript