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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
js DOM的学习笔记
Dec 22 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Vue.js动态组件解析
Sep 09 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
js资料prototype 属性
2007/03/13 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JsChart组件使用详解
2018/03/04 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python僵尸进程产生的原因
2017/07/21 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python中id函数运行方式
2020/07/03 Python
python中如何打包用户自定义模块
2020/09/23 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
服装创业计划书范文
2014/02/05 职场文书
给老师的一封建议书
2014/03/13 职场文书
安全生产标语
2014/06/06 职场文书
安全目标管理责任书
2014/07/25 职场文书
见习报告的格式
2014/11/04 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
尊师重教主题班会
2015/08/14 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript