javascript 动态修改css样式方法+JQuery中操作Css样式的方法

桃扇骨 2022-06-09 09:10 243阅读 0赞

JS  
显示/隐藏

var img=document.getElementsByName("img");
    
        function onclick1(){ 
        for(var i=0;i<img.length;i++){
            img[i].style="display:none";
        }

JS改变背景颜色等

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

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

JS直接修改样式类名

function changeStyle3() { 
      var obj = document.getElementById("btnB");
      //obj.className = "style2"; 这个方法和setAttribute效果相同
      obj.setAttribute("class", "style2");
    }

JS创建标签并增加样式

var spanNew = document.createElement("span");
     spanNew.innerText = "商品价格不能为空";
    spanNew.style = "font-size:10px; color: red";
     spanNew.className = "errorMes";

JQ  
显示/隐藏

$(".gameDi alog,.shadow").css("display", "none");

JQ改变位置

$(function(){ 
                var t5 = parseInt($(".main .div5").css("top"));
                $(".main .div5").css("top",50+"px");
            })

JQ改变背景颜色

$("#61dh a").css('color','#123456');
     $("#61dh a").hover(function(){ 
     $(this).css('color','#999');
     },
     function(){ 
     $(this).css('color','#123456');
    });

$("div").css({ fontSize:"30px",color:"red"});

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS动态增加CSS样式的方法

![49b2c659c2bceb1d17c005475b5342b0.jpeg][] 为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。

野性酷女/ 2024年04月01日 13:11/ 0 赞/ 5 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 167 阅读

相关 JQuery中操作Css样式的方法

本篇文章主要是对JQuery中操作Css样式的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助复制代码代码如下: //1、获取和设置样式

红太狼/ 2022年08月05日 01:30/ 0 赞/ 130 阅读

相关 javascript 动态修改css样式方法+JQuery中操作Css样式的方法

JS 显示/隐藏 var img=document.getElementsByName("img"); function onclick

桃扇骨/ 2022年06月09日 09:10/ 0 赞/ 244 阅读

相关 Javascript（六）javascript动态修改html的CSS样式

之前使用js修改html的属性达到一种交互的效果，事实上，使用js修改html的css样式可以实现一种更加绚丽的交互效果。要修改html的样式有两种方式，一种是修改styl

一时失言乱红尘/ 2022年05月17日 03:07/ 0 赞/ 738 阅读

相关 jQuery操作CSS样式的方法

jQuery操作CSS样式的方法总共有四种，很简单，建议使用下面的第三种方法。上代码： <!DOCTYPE html> <html lang="en">

矫情吗；*/ 2022年03月12日 10:44/ 0 赞/ 236 阅读

相关通过JQuery来修改CSS样式

JQuery是基于JS（JavaScript）代码编写的一种框架，其封装到许多内置属性和方法，让用户使用起来更加便利，具体代码如下： ①JQuery代码部分：

浅浅的花香味﹌/ 2021年09月23日 13:04/ 0 赞/ 295 阅读

相关 vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1727 阅读

相关 jQuery-css()方法总结——获取/设置样式

css()方法总结总结一下jQuery中使用css()方法获取和设置样式的特性。首先新建一个html文件，内容如下： <!DOCTYPE html>

末蓝、/ 2021年06月22日 15:35/ 0 赞/ 517 阅读

相关 jQuery动态添加删除CSS样式？

jQuery动态追加和移除CSS样式，有两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个实例讲解用法。

小灰灰/ 2020年04月21日 07:15/ 0 赞/ 945 阅读