原生Javascript修改CSS样式的四种方式

星河_赵梓宇

已于 2024-10-14 13:43:19 修改

阅读量7.5k

点赞数 5

文章标签： javascript 前端 html

于 2023-05-09 13:45:41 首次发布

本文链接：https://blog.csdn.net/Aria_Miazzy/article/details/130578196

版权

本文介绍了如何使用JavaScript来操作DOM元素的样式，包括设置背景色、修改style属性、使用cssText以及管理class。示例代码展示了添加、删除和修改class名称的方法，以实现动态改变CSS样式。

摘要由CSDN通过智能技术生成

设置style

var domName = document.querySelector('#domName');
domName.style.backgroundColor = '#aaa'

设置属性setAttribute

var domName = document.querySelector('#domName');
domName.setAttribute('style', 'background: #000;')

设置cssText

var domName = document.querySelector('#domName');
domName.style.cssText = 'background:#000; margin:0px 2px;'

设置class

重写className以修改CSS样式

var domName = document.querySelector('#domName');
domName.className = 'red';

另外通过classList已修改CSS样式，可以避免class被覆盖

var bottom = document.querySelector('#bottom');
bottom.classList.add(className); // 添加一个类名
bottom.classList.remove(className); // 移除一个类名
bottom.classList.add('red')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

星河_赵梓宇

关注关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js 实现动态修改CSS的样式

03-30

js 实现动态修改CSS的样式! 值得下载看看!资源免费,大家分享!!

JavaScript修改css样式style

小宝

06-20

268

一、局部改变样式分为改变直接样式，改变className和改变cssText三种。需要注意的是：注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。调用方法：如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像document.getElementById(...

参与评论您还未登录，请先登录后发表或查看评论

JS中【CSS脚本化】十个方面解读

热门推荐

qq_31984915的博客

11-06

1万+

下面我给大家介绍的是原生js更改CSS样式的两种方式： 1通过在javascript代码中的node.style.cssText="css表达式1；css表达式2；css表达式3 "的方式直接更改CSS样式。 2先在CSS样式表中对特定的类如“active类”设置样式（这里的active类是假定的，暂时不存在），然后再在javascript代码中通过node.classname="activ

JavaScript动态添加CSS

好心情的博客

12-19

397

[code="js"]function addCssByStyle(cssString){ var doc=document; var style=doc.createElement("style"); style.setAttribute("type", "text/css"); if(style.styleSheet){// IE style.styleSheet.c...

原生JS实现获取及修改CSS样式的方法

10-18

原生JavaScript获取和修改CSS样式是前端开发中常见的操作，理解并熟练掌握这些方法对于动态更新页面样式至关重要。通过`style`对象和`getComputedStyle()`方法，我们可以灵活地操控页面元素的外观。同时，考虑到...

JS修改css样式style浅谈

12-03

原生javascript实现读写CSS样式的方法详解

12-08

总的来说，原生JavaScript提供了多种方式来读取和设置CSS样式，开发者可以根据实际需求选择合适的方法。了解这些技术可以帮助我们更好地控制网页的视觉表现，尤其在进行复杂的交互和动画效果时。

js修改css样式的方法,js如何设置css样式？js修改css样式的方法

weixin_39861882的博客

08-03

8987

js如何设置css样式？本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。下面我们就给大家介绍使用javascript是如果设置css样式的。1、直接设置样式(内联样式)使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。此对象允许我...

使用JS修改CSS的方法

明凯博客

07-09

1万+

1.js修改单个元素的css属性。 document.getElementById("obj").className="…"; document.getElementById("obj").style.backgroundColor="#003366"; 2.js修改整个页面的css属性。 link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> <span on click="javascript:docum

js修改css属性、html属性

05-11

1万+

js修改html属性： 1.document.getElementById('cloimg').setAttribute("src","/home/images/open.gif");---正确 2. $('#cloimg').setAttribute("src","/home/images/open.gif");---？？？待验证 js修改css属性： 1.id/clas

如何用js修改css样式？

高先生的猫

07-15

547

如何用js修改css样式？下面本篇文章就来给大家介绍一下使用JavaScript修改css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。共用代码： <div id="div">这是一个盒子</div> var div = document.getElementById("div"); 第一种：用cssText div.style.cssText='width:600px;height:250px;border:1px red solid;t

js修改元素样式

libingjiedd的博客

03-17

3670

–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等。|–x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)：获取指定字符；如返回-1，x则不在数组中。|–parentNode.insertBefore()(新元素对象，A)–其中A为新元素要插入位置的后一位元素。|–x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字。

前端原生js/jq放大图片方法

07-12

在前端开发中，可以使用原生 JavaScript 或 jQuery 来实现图片的放大效果。下面分别给出两种方法： 1. 原生 JavaScript 方法： ```javascript // HTML 结构 // <img src="path_to_image.jpg" alt="Image" class="zoomable-image"> // CSS 样式 // .zoomable-image { // cursor: pointer; // } // JavaScript 代码 const images = document.querySelectorAll('.zoomable-image'); images.forEach(image => { image.addEventListener('click', function() { // 创建放大图片的容器 const zoomContainer = document.createElement('div'); zoomContainer.classList.add('zoom-container'); document.body.appendChild(zoomContainer); // 创建放大图片 const zoomedImage = document.createElement('img'); zoomedImage.src = this.src; zoomedImage.alt = this.alt; zoomContainer.appendChild(zoomedImage); // 点击放大图片容器时关闭放大效果 zoomContainer.addEventListener('click', function() { this.remove(); }); }); }); ``` 2. 使用 jQuery 方法： ```javascript // HTML 结构与 CSS 样式同上 // JavaScript 代码 $('.zoomable-image').on('click', function() { // 创建放大图片的容器 const zoomContainer = $('<div>').addClass('zoom-container'); $('body').append(zoomContainer); // 创建放大图片 const zoomedImage = $('<img>').attr('src', this.src).attr('alt', this.alt); zoomContainer.append(zoomedImage); // 点击放大图片容器时关闭放大效果 zoomContainer.on('click', function() { $(this).remove(); }); }); ``` 以上代码实现了点击图片时，在页面上创建一个放大的图片，并且点击放大的图片时可以关闭放大效果。你可以根据实际需求，对样式和交互进行进一步的调整和优化。