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 特性检测并非浏览器检测
Jan 15 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
js replace 全局替换的操作方法
Jun 12 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
用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
xml+php动态载入与分页
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python ftp上传文件
2016/02/13 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
python实现超市扫码仪计费
2018/05/30 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
公司市场部岗位职责
2013/12/02 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
师德师风剖析材料
2014/09/30 职场文书
医院科室评语
2015/01/04 职场文书
汽车转让协议书
2015/01/29 职场文书
项目投资意向书范本
2015/05/09 职场文书
地球上的星星观后感
2015/06/02 职场文书
Python基础之Socket通信原理
2021/04/22 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
小程序自定义轮播图圆点组件
2022/06/25 Javascript