js如何修改样式?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js如何修改样式?相关的知识,希望对你有一定的参考价值。

比如一个css名为 css_abc, 这样样式被多个div标签引用.
我想直接修改css_abc样式, 从而达到多个div样式的作用.
而不是去修改一个个div样式.
我在网上找的多数都是修改div样式. 而不是修改css本身

参考技术A 这样应该是不行的吧,或者是我还不会,而且要修改的话直接去css文件修改就好了,如果用js修改的话可以添加新的样式覆盖原来的样式,直接修改类名的话会使得操作复杂度加深,无法很好得进行维护。 参考技术B 不能控制已经定义的css 只能控制dom 元素。
你可以 定义两个不同的css 名称 比如 css_abc 和css_123
然后 $('.css_abc').removeClassName('css_abc').addClassName('css_123')
参考技术C

javascript修改元素css样式的三种方法(代码)

修改元素的css样式一般是标签的style属性中或头部的style标签中进行增删与修改。

下为利用JS修改元素的css样式的三种较为实用的方式。

第一种:获取相应标签对应的 javascript对象.style,进行赋值

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="UTF-8">

            <title></title>

            <style type="text/css">

                .square

                    width: 300px;

                    height: 300px;

                    background: red;

                

            </style>

        </head>

        <body>

            <p class=""></p>

            <script>

                //第一种:获取相应标签对应的 javascript对象. style

                (function()

                    var p= document. getElementsByTagName("p")[0];

                    p.style.backgroundColor=red;

                    p style. width= "300px";

                    p style. height="300px";

                )();

            </script>

        </body>

    </html>

第二种:获取相应标签对应的 javascript对象. className

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.square
width: 300px;
height: 300px;
background: red;

</style>
</head>
<body>
<p class=""></p>
<script>
//第二种:获取相应标签对应的 javascript对象. className
var p= document. getElementsByTagName("p")[0];
p.className="square";
</script>
</body>
</html>

第三种:通过setAttribute("属性名","属性值") [更广义层面上]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.square
width: 300px;
height: 300px;
background: red;

</style>
</head>
<body>
<p class=""></p>
<script>
//第三种:通过setAttribute("属性名","属性值")
var p= document. getElementsByTagName("p")[0];
p.setAttribute("class","square");
p.removeAttribute("class");
</script>
</body>
</html>

参考技术D 这样应该是不行的吧,或者是我还不会,而且要修改的话直接去css文件修改就好了,如果用js修改的话可以添加新的样式覆盖原来的样式,直接修改类名的话会使得操作复杂度加深,无法很好得进行维护。
希望采纳,谢谢。

js如何给目标元素的兄弟元素更改样式

找到目标元素的父元素,再找到它的子元素即可:
目标元素.parentNode.childNode
然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素,要不要排除掉就看你了
也可以直接找目标元素的兄弟元素,但这要分两步走:往前找和往后找,除非目标元素是所有兄弟里面的老大或老幺,倒不如通过老爸直接找到所有兄弟来得更快更方便。
参考技术A

先获取兄弟节点对象,然后再修改样式。如:

var s= document.getElementById("test");
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
ns.style.color='red';//字体颜色
ps.className='red';//更改class属性

用jQuery也封装了,很多操作样式的方法。

以上是关于js如何修改样式?的主要内容,如果未能解决你的问题,请参考以下文章

原生JS如何修改某一段样式

JS 动态修改CSS 样式方法/全局

js修改样式css都有哪些方法呢?

js如何更改css样式,

如何使用 JS 将样式修改为 HTML 元素(使用 CSS 外部样式)?

html页面滚动条样式如何修改???通过CSS、还是JS