JS修改css样式style浅谈

 更新时间:2013年05月06日 11:17:21   作者:  
分为改变直接样式,改变className和改变cssText三种,需要的朋友可以参考下
一、局部改变样式

分为改变直接样式,改变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://www.jb51.net/demo.css" type="text/css">
</link>
</head>


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

< ? xml-stylesheet type="text/css" href="https://www.jb51.net/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>

相关文章

  • JS判断对象属性是否存在的五种方案分享

    JS判断对象属性是否存在的五种方案分享

    编写JS的过程中,我们经常用到对象,也会用到对象中的属性,下面这篇文章主要给大家介绍了关于JS判断对象属性是否存在的五种方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • [Web]防止用户复制页面内容和另存页面的方法

    [Web]防止用户复制页面内容和另存页面的方法

    原理就是利用js控制一些复制等事件,但破解也简单,这里就不说了。
    2009-02-02
  • js和jquery中获取非行间样式

    js和jquery中获取非行间样式

    本篇文章主要介绍了js和jquery中获取非行间样式的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • Jquery代码实现图片轮播效果(一)

    Jquery代码实现图片轮播效果(一)

    经理交给我一个网站新闻资讯网页开发的活儿,对于我这样的java程序员,没有接触过网页设计这么高端的东东,该怎么搞呢,去度娘那搜索到不少结果,而且很大部分都是用jquery做的,于是根据自己的一些的理解,提供了这篇jquery轮播效果的讲解,有需要的朋友可以来参考下
    2015-08-08
  • javascript 页面跳转方法集合

    javascript 页面跳转方法集合

    js 中实现页面跳转的方法(window.location和window.open的区别)
    2009-03-03
  • JavaScript对象数组如何按指定属性和排序方向进行排序

    JavaScript对象数组如何按指定属性和排序方向进行排序

    这篇文章主要介绍了JavaScript对象数组如何按指定属性和排序方向进行排序的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript数据类型检测实现方法详解

    JavaScript数据类型检测实现方法详解

    Javascript中检查数据类型一直是老生常谈的问题,类型判断在web开发中也有着非常广泛的应用,所以下面这篇文章主要给大家介绍了关于JS数据类型检测的那些事,需要的朋友可以参考下
    2022-11-11
  • 微信小程序实现根据字母选择城市功能

    微信小程序实现根据字母选择城市功能

    这篇文章主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 纯JS前端实现分页代码

    纯JS前端实现分页代码

    这篇文章主要介绍了纯JS前端实现分页代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript实现图片循环渐显播放的方法

    javascript实现图片循环渐显播放的方法

    这篇文章主要介绍了javascript实现图片循环渐显播放的方法,涉及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论