js中设置样式的几种方式（setAttribute，className）

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量8.5k 收藏 2
点赞数 1
文章标签： function button javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/generalfu/article/details/7891697
版权
Js 同时被 2 个专栏收录
24 篇文章 1 订阅
订阅专栏
Html
23 篇文章 2 订阅
订阅专栏

以设置背景色为例子


可以用单一的backgroundColor
可以用className
可以用setAttribute（setAttribute 和 removeAttribute）为一组

实例代码（实现效果点击一个按钮，就把整个背景色替换，点击其他的就换其他的）

 

<html>

<head>

<title></title>

<style type="text/css">
    .bg{
        background-color : "blue" ;
    }    
</style>

<script language="javascript" type="text/javascript">
    window.onload = function(){
    
        $("redC").onclick = function(){
            document.body.removeAttribute("className","bg");
            document.body.style.backgroundColor = "red";
        }
         $("blueC").onclick = function(){
            document.body.style.backgroundColor = "";
           
            document.body.setAttribute("className","bg");
//            document.body.className = "bg";
        }
        
        $("pinkC").onclick = function(){
          document.body.removeAttribute("className","bg");
            document.body.style.backgroundColor = "pink";
        }
        
        $("blackC").onclick = function(){
          document.body.removeAttribute("className","bg");
            document.body.style.backgroundColor = "black";
        }
    }
    
    function $(uid){
        return document.getElementById(uid);
    }
</script>

</head>

<body>
<input type="button" value="red" id="redC"/>
<input type="button" value="blue" id="blueC"/>
<input type="button" value="pink" id="pinkC"/>
<input type="button" value="black" id="blackC"/>
</body>

</html>


 

小傅哥
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js setattribute批量设置css样式
10-29
setattribute批量设置css样式的实现代码。
document.body的一些用法以及js中的常见问题
dashuaizhu6400的博客
04-17 605
document.body的一些用法以及js中的常见问题 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (...
bug解决思路.txt
06-12
package com.example.supplier.service; import com.example.supplier.entity.User; import java.util.List; public interface UserService { //查询全部 public List<User> selectAll(); } package com.example.supplier.dao; import com.example.supplier.entity.SysLogInfo; import org.apache.ibatis.annotations.Mapper; import org.springframework.stereotype.Repository; import java.util.List; import java.util.Map; @Repository @Mapper public interface SysLogInfoDao { // 分页查询数据 List<SysLogInfo> listSysLogInfo(Map map); // 查询总数量 Integer getLogInfoCount(Map map); } <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>创建组合</title> [removed][removed] [removed][removed] </head> <body <div class="chose2" ms-controller="fenye" id="fenye"> <ul class="neirong" > <li ms-repeat="datalist"><p><span>{{el.id}}</span><span >{{el.name}}</span></p></li> </ul> <!--//数据--> <div id="yema" </div> </div> [removed] var yema=document.getElementById("yema"); //<![CDATA[ function fun(){ var top=[[${top}]]; console.log(top); for(var i=1;i<3;i++){ var a=document.createElement("a"); a.setAttribute("id",i); a.innerText=i; a.href="#"; a. a. fun(){ change(this.id); tian(this.id); }; yema.appendChild(a); }//生成前两个页码，这两个页码是始终都存在的 var span1=document.createElement("span"); span1.innerText="..."; span1.setAttribute("id","span1"); yema.appendChild(span1);//生成省略号，根据情况进行判断显示与否 for (var i = 3; i <top-1; i++) { var p = document.createElement("a"); p.setAttribute("id", i); p.innerText = i; p.href="#"; p. p. fun(){ change(this.id); tian(this.id); }; yema.appendChild(p); } var span2=document.createElement("span"); span2.innerText="..."; span2.setAttribute("id","span2"); yema.appendChild(span2);//生成后一个省略号 for(var i=top-1;i<=top;i++){ var p=document.createElement("a"); p.setAttribute("id",i); p.innerText=i; p.href="#"; p. p. fun(){ change(this.id); tian(this.id); }; yema.appendChild(p); }//生成后两个页码，这两个页码也始终都存在 tian(1);//调用函数,进行初始化页面处理 viewmodel.request(); } function tian(flag){ var top=[[${top}]]; console.log(top); //使用js隐藏属性 var span1=document.getElementById("span1"); var span2=document.getElementById("span2"); var value = flag; if(value>=5){ span1.style.display=""; }//如果是第5个页码以上，省略号将显示 else span1.style.display="none"; for(var i=3;i<top-1;i++){ var p=document.getElementById(i); if(i>value-2&&i<parseInt(value)+2){ p.style.display="";//显示 }//显示当前页码以及当前页码后两个页码 else p.style.display="none";//隐藏 } if(value<=top-3) span2.style.display=""; else span2.style.display="none"; } //]]> function change(flag){ viewmodel.number=flag; viewmodel.request(); } var viewmodel = avalon.define({ //id必须和页面上定义的ms-controller名字相同，否则无法控制页面 $id: "fenye", number:1, datalist: {}, request: function () { $.ajax({ type: "POST", url:"/data", data:{"number":viewmodel.number}, success: function (data) { viewmodel.datalist = data; } }); } }); avalon.scan(); [removed] </body> </html> <!--分页显示数据-->
JavaScript(5)
weixin_43842098的博客
03-09 140
DOM:文档对象模型是访问和处理html文档的方法 用来将html文档呈现为带有元素，属性和文本的节点数。 节点有三个重要属性：名称，值，类型。
你真的知道DOM吗（中）----（Document类型, Element类型）
反手一个bug的博客
09-28 902
文章目录前言正文Document类型文档子节点文档信息查找元素文档写入Element类型HTML元素特性的相关方法document.getAttribute()document.setAttribute() 前言 DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。 正文 Document类型 在浏览器中，document对象是HTMLDocu
js 设置style属性
weixin_30809173的博客
06-20 219
var cssText = ”font-weight:bold;color:red;”//下面写法用于firefox类型浏览器element.setAttribute(“style”,cssText);//下面写法用于IE类型浏览器element.style.cssText = cssText; <scriptlanguage="JavaScript"> <!...
JS中setAttribute的使用
chen_wei_1990的专栏
09-14 1852
在web开发中，经常会为某个标签设置属性，那么就可以利用js的setAttribute()方法为标签的属性设置值。   下面的内容翻译自W3C DOM Level 1中关于setAttribute方法的说明.   具体的方法参数如下： object.se
【js：setAttribute 的兼容性】class（eg）,style
baojie1022的专栏
05-13 1066
一、class和className兼容方法： object.setAttribute("class","content") 在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。 object.setAttribute("className","content") 只有IE7能设置成功，但是其他浏览器均无法设置。 兼容方法： 使用  object.cla
js的setAttribute中class和className浏览器兼容问题
miaoshaohoa的专栏
01-20 6430
前几天工作中遇到一个js问题，本来js就不大会，倒腾了好长时间，并在做弹窗的时候用到了setAttribute，出现了不兼容的问题，在网上查了好多，真是郁闷，看来啥都得学啊。     主要的工作是做一个根据时间段变化图片的背景色，并在每一个时间段开始的同时同步进行倒计时，唉，两个分开来做都很好做，但是整合到一起的时候就麻烦了，倒计时的时候不会进行刷新......先说这个弹窗问题，在不是上述时间段
JavaScript中setAttribute用法介绍
10-27
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题
JS设置CSS样式的方式汇总
11-30
1. 直接设置style的属性 某些情况...2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setA
javascript中setAttribute()函数使用方法及兼容性
10-23
主要介绍了javascript中setAttribute()函数使用方法及兼容性的相关资料,需要的朋友可以参考下
JS之DOM操作--概述、document节点属性、document节点选中页面元素、document节点创建页面元素和属性、操作页面元素属性、操作元素内容、节点操元素样式
小白小白从不日别的博客
04-12 1663
DOM
JS--JavaScript属性节点特性，创建属性节点，读取、设置、删除属性（getAttribute、setAttribute、removeAttribute）
吴声子夜歌的博客
09-26 2034
属性节点 属性节点由Attr类型表示，在文档树种被称为元素的特性，习惯称之为标签的属性。属性节点具有以下特征： nodeType值为11 nodeName值为特性的名称 nodeValue值为null 在HTML中不包含子节点 在XML中子节点可以是Text、EntityReference 访问属性节点 Attr是Element的属性，作为一种节点类型，它继承了Node类型的属性和方法。不过A...
【JavaScript 教程】DOM——属性的操作
油墨香^-^的博客
06-10 594
作者 | 阮一峰 HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。 <a id="test" href="http://www.example.com"> 链接 </a> 上面代码中，a元素包括两个属性：id属性和href属性。 属性本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMlElement对象）来操作属性。本章介绍如何操作这些属性。 1、Element.attribute
JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild
weixin_49602426的博客
08-27 2645
顾名思义，自定义也就是自己创建一个，通过JS生成节点或者属性，而不是在html里写的。setAttribute(name, value)：设置/添加元素节点的属性，有则设置，无则添加；获取元素节点的属性；removeAttribute：清除属性；...
Javascript与CSS在IE和Firefox中的误区及区别
别把新手当傻子
06-16 209
[b][size=medium]Javascript中的常见问题[/size][/b] [b]1. 集合类对象问题[/b] 现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox 不能。 解决方法：改用 [] 作为下标运算。如：document.forms("formName") 改为 [code="js"]document.forms["formName"]; //...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 289
注释很详细，直接上代码……
js中setAttribute设置属性设置不上
04-21
可以尝试使用 `element.property = value` 的方式设置属性，或者使用 `element.setAttribute("property", value)` 的方式进行设置。如果仍然无法设置属性，可能是因为元素不存在或被隐藏等原因导致无法设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小傅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值