JavaScript修改css样式style动态改变元素样式_css动态style

css样式

170 浏览量更新于2023-05-05 评论收藏 50KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JavaScript修改修改css样式样式style动态改变元素样式动态改变元素样式

一、局部改变样式

分为改变直接样式，改变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，如

调用时很简单，如

<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>

</link></head>

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

代码如下:

< ? xml-stylesheet type=”text/css” href=”http://www.dhtmlet.com/dhtmlet.css” ?>

第二种：定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的和标记之间插入一个

块对象。定义方式请参阅样式表语法。示例如下：

代码如下:

<html>

<head>

<!–

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38625184

粉丝: 4
资源: 947

会员权益专享

JavaScript修改css样式style动态改变元素样式

评论0

会员权益专享

最新资源

JavaScript修改css样式style动态改变元素样式

评论0

原生js实现改变随意改变div属性style的名称和值的结果

javascript动态设置样式style实例分析

JavaScript修改css样式style

使用JavaScript操作网页元素样式

Tampermonkey 中的 CSS 注入与样式修改技术

利用CSS选择器和伪类创建动态样式

如何用JavaScript改变文本样式

CSS样式与布局

JS修改css样式style

使用JavaScript动态地创建和修改CSS样式，这个方法能给我举个例子嘛

js修改css样式

如何动态修改CSS的样式？

修改element中css样式

强制修改css样式

js修改css样式属性

jquery 如何修改css样式

JS点击事件修改css样式

js append追加html后动态添加css样式

js 动态修改伪类元素的样式

js通过class修改css样式属性

会员权益专享

最新资源