如何动态修改css样式

如何动态修改css样式

一、使用obj.className来修改样式表的类名

function changeStyle1() {
  var obj = document.getElementById("btnB");
  obj.style.backgroundColor= "black";
}

缺点:会覆盖原有的style(相关课程推荐:JS视频教程

二、使用obj.style.cssTest来修改嵌入式的css

function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = " display:block;color:White;
}

缺点:会覆盖原有的style

三、使用obj.className来修改样式表的类名

function changeStyle3() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

优点:不会覆盖

四、使用更改外联的css文件,从而改变元素的css

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

实现整体页面换肤的最佳方案

五、通过js更新这个元素的class属性

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}
Image placeholder
前端答疑
未设置
  68人点赞

没有讨论,发表一下自己的看法吧

推荐文章
js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

如何修改css文件?

如何修改css文件?1、首先找到需要修改的css文件2、然后双击打开如果你没有安装相应的代码编辑器,那只能使用记事本打开了,没有语法高亮和代码提示。3、这里我们使用SublimeText这款代码编辑器

小程序怎么用js修改css?

小程序怎么用js修改css?微信小程序和普通的前端开发有很多不同。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=new

超大规模商用 K8s 场景下,阿里巴巴如何动态解决容器资源的按需分配问题?

导读:资源利用率一直是很多平台管理和研发人员关心的话题。本文作者通过阿里巴巴容器平台团队在这一领域的工作实践,整理出了一套资源利用提升的方案,希望能够带给大家带来一些讨论和思考。引言不知道大家有没有过

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

如何保存css样式

如何保存css样式1、首先要确定,你要的css样式是内联在html里面的,还是单独一个css文件的,如果是内联的话,直接在网页点击右键,查看源码,然后再复制下来存入一个文档里就可以了。(相关课程推荐:

如何在react加css样式?

react加css的3种方法:1.行内样式直接给对应的DOM元素添加style属性,遵循react的规则,写在{}当中。ThisisPage1!2.声明样式render(){   letmystyle

如何调用不同css样式?

1、根据不同分辨率来调用不同css样式可以使用@media查询来根据不同分辨率调用不同css样式。使用@media查询,你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不

js中如何移除css样式?

js中如何移除css样式?dom元素应用css有两种方式:●通过class类名和id名应用样式●通过指定style属性应用样式我们可以针对以上两种方式写移除css样式的方法(相关课程推荐:JS视频教程

dw中如何设置表格css样式

1、新建一个空白文档,点击插入table,插入一个适合的表格。2、在表格内输入任意文字,右键css样式,新建,选择标签类型。(推荐学习:CSS视频教程)3、选择table,点击确定,根据需求定义tab

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

怎么载入css样式?

1.行内式行内式也称内联样式,是通过标记的Istyle属性来设置标记的样式,其基本语法格式如下:

css样式是什么意思?

CSS(CascadingStyleSheets,层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS就是一种叫做样式表

dw怎么链接css样式

dw怎么链接css样式?(以下以DWCS6版本为例,其他版本大同小异):在DW里可通过直接引入、CSS样式面板和属性面板的方式来链接、使用CSS。1、如果是外联样式表,在DW界面中可通过直接拖动CSS

thinkphp加载不了css样式怎么解决

thinkphp加载不了css样式怎么解决解决方法:1、项目入口文件index.php

css样式表是什么意思?

CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

css样式不兼容怎么办?

1、使用浏览器私有属性我们经常会在某个CSS的属性前添加一些前缀,比如-webkit-,-moz-,-ms-,这些就是浏览器的私有属性。为什么会出现私有属性呢?这是因为制定HTML和CSS标准的组织W

css样式有哪几种?

CSS即层叠样式表(CascadingStyleSheets),是一种用来表现HTML或XML等文件样式的计算机语言。CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚

ie怎么加载不了css样式?

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。ie怎么加载不了css样式?IE一直是特殊的一个浏览器,有时,会出现无法加载css样

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

服务器不加载css样式表

服务器不加载css样式表的原因:●HTML文件中,引用css样式表的路径填写错误导致的。●nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。●样式文件编码和网页编码不一致,导致不能解析cs

css样式表分类及区别

css样式表分类及区别一、样式表分类(1)内联样式(2)内部样式表(3)外部样式表(相关课程推荐:css视频教程)二、不同样式表的区别●内联样式【优先级最高】【不常用】【代码重复使用性最差】(当特殊的

dw里怎样设置图片的css样式

dw里怎样设置图片的css样式1、首先在文件内插入一张图片,点击插入\图像,选择一张图片即可。2、选中图像,点击css样式窗口的+号,新建一个CSS(相关课程推荐:css视频教程)样式,打开对话框。选

.vue文件怎么写css样式

.vue文件怎么写css样式.vue文件由结构——行为——样式三部分构成,分别对应template、script、style标签,css样式就写在style标签中。一、直接在Test.vue中写css