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 应用类库代码
Jun 02 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP关联链接常用代码
2012/11/05 PHP
php获取汉字首字母的函数
2013/11/07 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript中强制执行toString()具体实现
2013/04/27 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python pygame实现五子棋小游戏
2020/10/26 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python类class参数self原理解析
2020/11/19 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
购房协议书
2014/04/11 职场文书
小学运动会入场词
2015/07/18 职场文书