方法一:改变外联css文件,这里不讲这个。

方法二:通过改变claaName来改变样式,语法:

obj.className = "style2";

//或者

obj.setAttribute("class", "style2");

方法三:使用obj.style.cssTest,语法:

 obj.style.cssText = " display:block; color:White;“

这个方法优点:

可以这样添加好几个属性。

缺点:会把obj原来的cssText清掉,解决方案:使用累加,语法:

obj.style.cssText += " display:block; color:White;“

上面cssText累加的方法在IE中是无效的。

然而,可以在前面添加一个分号来解决这个问题:

obj.style.cssText += " ; display:block; color:White;“

注意:如果前面有样式表文件写着 div { text-decoration:underline; },这个会被覆盖吗?不会!因为它不是直接作用于 HTML 元素的 style 属性。

方法四: 使用obj.style.backgroundColor,语法:

obj.style.backgroundColor= "black";

注意:backgroundColor可以换成其他属性,这里仅是示例,比如color,position等。

最后一个知识点:css Sprite,

就是有一张大图,通过控制background-position来实现显示大图的某一部分。可以用来制作动画。这个大图是作为background-image:。

优点是减少http请求,缺点是定位麻烦。维护麻烦。

具体用法请移步:https://blog.csdn.net/u011349149/article/details/24181675

javascript 动态修改css样式的更多相关文章

  1. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  2. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  3. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  4. JavaScript动态修改CSS

    链接:https://www.cnblogs.com/aademeng/articles/6279060.html 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几 ...

  5. 使用JavaScript动态更改CSS样式

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  6. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  7. 微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)

    WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...

  8. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  9. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

随机推荐

  1. 包建强的培训课程(15):Android App热修复技术

    @import url(/css/cuteeditor.css); Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈 ...

  2. Java实现链表的常见操作算法

    链表分为单链表,双向链表和循环链表,是一种链式存储结构,由一个个结点链式构成,结点包含数据域和指针域,其中单链表是只有一个指向后驱结点的指针,双向链表除头结点和尾结点外,每个结点都有一个前驱指针和一个 ...

  3. swiper里面几个有用的参数

    概述 这是我自己用swiper和看别人官网源码用swiper总结出来的,供以后开发时参考,相信对其他人也有用. observeParents 有时我们会改变swiper的父级元素,比如页面的resiz ...

  4. SpringAop实操之记录关键业务请求数据

    AOP,中文名称,切面.在不影响业务代码情况下,实现想要的功能,是个真炫酷的事. aop是个好东西,记录日志是必须的. 记录数据也一样的,那么也是可以用aop来实现的,这里借助注解一起解决问题吧. 因 ...

  5. Spring Boot(八):RabbitMQ 详解

    RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用. 消息中间件在互联网公司的使用中越来越多,刚才还看到新闻阿里将 RocketMQ 捐献给了 ...

  6. Chapter 4 Invitations——10

    "Mr. Cullen?" the teacher called, seeking the answer to a question that I hadn't heard. “C ...

  7. 痞子衡嵌入式:SEGGER J-Link仿真器硬件版本变迁

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是J-Link仿真器版本变迁. 硬件版本 主控芯片 固件升级工具 V7 ARM7TDMI, 55MHz Atmel AT91SAM7S64 ...

  8. Mybatis学习(三)————— 映射文件详解

    前面说了全局配置文件中内容的详解,大家应该清楚了,现在来说说这映射文件,这章就对输入映射.输出映射.动态sql这几个知识点进行说明,其中高级映射(一对一,一对多,多对多映射)在下一章进行说明. 一.输 ...

  9. JavaScript之深拷贝和浅拷贝

    前言 工作中会经常遇到操作数组.对象的情况,你肯定会将原数组.对象进行‘备份’当真正对其操作时发现备份的也发生改变,此时你一脸懵逼,到时是为啥,不是已经备份了么,怎么备份的数组.对象也会发生变化.如果 ...

  10. sed修炼系列(二):sed武功心法(info sed翻译+注解)

    sed系列文章: sed修炼系列(一):花拳绣腿之入门篇sed修炼系列(二):武功心法(info sed翻译+注解)sed修炼系列(三):sed高级应用之实现窗口滑动技术sed修炼系列(四):sed中 ...