原生js获取元素并设置样式

最新推荐文章于 2024-08-06 14:02:36 发布

small面包

最新推荐文章于 2024-08-06 14:02:36 发布

阅读量3.4k

点赞数

分类专栏： js 获取元素设置样式文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_44986077/article/details/108790336

版权

js 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

获取元素

1 篇文章 0 订阅

订阅专栏

设置样式

1 篇文章 0 订阅

订阅专栏

本文介绍如何利用JavaScript的DOM操作，通过class选择器获取HTML元素，并详细讲解如何设置和改变这些元素的CSS样式，以实现动态效果。

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

下面我是通过class获取元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .bb {
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="aa">
      <h1>hahah</h1>
    </div>
    <script>
      window.onload = function() {
      //通过类名获取元素
        var a = document.getElementsByClassName('aa')[0]
        //给元素设置样式
        a.style.backgroundColor = 'pink'
      }
    </script>
  </body>
</html>

//后面不带索引值控制台出现报错
var a = document.getElementsByClassName('aa')

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

small面包

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

原生js获取元素样式

weixin_33819479的博客

09-30

157

摘要：我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style 在学习DOM的时候就看到通...

原生js添加样式的方法

寂寥人生

07-02

1195

https://www.bbsmax.com/A/A7zgKYwoz4/

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

原生js: 使用原生js设置元素的样式为左侧对齐

最新发布

fury的博客

08-06

380

现在有了这个p标签同时写入了文本, 我希望设置在这个p标签的样式为text-align:left;

原生JS 设置样式

程序猿开发日志【学习永无止境】

02-24

8237

用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';element.style.height = '100px'; 2. 直接设

原生JS设置CSS样式有多少方式

小天才程序员的博客乐园

06-21

4310

element.style 和 element.style.cssText有什么区别原生 JS 调整样式方式有 3 种。 element.style 使用驼峰形式 !important 权重无效 document.getElementById("box").backgroundColor = "red" // !important 无作用，下面两句是等效的 document.getElementById("box").style.color = "red !important" document

js怎么给元素添加样式框,js 怎么给内容添加样式

阿发狗伪原创

10-14

500

大家好，小编来为大家解答以下问题，怎么在js中给元素添加属性，js给元素添加自定义属性，现在让我们一起来看看吧！element.style 行内样式操作element.className 类名样式操作。

JS_js设置与获取标签属性，js设置元素样式

小歪博客

10-29

896

JavaScript获取标签属性先介绍两个常用方法: attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。应用标签如下: <input type="text" name="mohu" value="mohu

利用原生JavaScript获取元素样式只是获取而已

10-25

### 原生JavaScript获取元素样式的知识点解析 #### 1. JavaScript获取元素样式的原理和限制在原生JavaScript中，获取元素样式与设置元素样式是完全不同的操作。获取样式意味着我们只能获取到当前元素的样式信息，...

原生js获取元素样式的简单方法

10-21

本文将介绍使用原生JavaScript来获取元素样式的方法，这种方法主要分为几种：使用ele.style属性、getComputedStyle方法、currentStyle属性以及getPropertyValue方法。首先，ele.style属性是最直接获取样式的方式，...

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

10-18

本文将详细讲解如何使用原生JS来获取和修改CSS样式，包括行内样式、内部样式以及外部样式，同时也会涉及浏览器兼容性问题。一、行内样式获取行内样式是直接在HTML元素的`style`属性中定义的样式。例如： ```html ...

原生javascript获取元素样式

10-24

总结来说，原生JavaScript提供了多种方法来获取元素样式，每种方法有其适用场景和限制。了解这些方法的细节和浏览器兼容性问题对于Web前端开发人员来说是非常重要的。无论是在实现交互动效、布局调整还是在优化页面...

原生javascript获取元素样式属性值的方法

12-12

IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象...

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

YunWisdom

05-09

7522

原生Javascript/原生JS修改CSS样式

原生js获取设置元素样式及属性值小结

Jqy_111的博客

06-15

2157

一、元素样式 1、原生js获取元素样式以下使用dom代表元素节点。 1、dom.style.xx 如要获取一个元素的color，可以使用元素.style.color 。需要注意的是这种方式只能获取元素的行内样式值，无法获取到定义在<style></style>标签和通过<link href="xx.css">加载进来的样式。语法如下： let el= document.getElementById("test"); el.style.color; 2、getCo

原生js修改元素样式的几种方式

热门推荐

业余前端的职业经历

12-20

2万+

用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式，有的时候确实需要我们通过原生的方式进行操作。今天就说几个通过原生j s方式修改样式的方法最简单的就是直接 dom.style 如果是长一点的属性名字的话是通过驼峰的写法比如。“backgroun d-color” => backgroundColor var bottom = document.querySelector('#bottom'); bottom.style.backgroundColor = '#

通过JS获取并修改元素的样式

qq_53499304的博客

02-14

6951

通过JS获取内联式、嵌入式和外链式样式，以及修改

原生js获取class增加CSS样式,原生JS获取及设置CSS样式-3.操作样式表

weixin_42522552的博客

08-03

3749

既然行内样式可读可写，计算过后的样式属性也可读；那么样式表中的样式规则也应该可以被JS修改这篇主要是简单教大家如何读取样式表中的样式、以及如何修改样式表样式表(CSSStyleSheet)一般分为两种：元素包含的样式表(HTMLLinkElement)// index.cssdiv {background-color: blue;border: 10px solid #ccc;}p {color...

子节点修改父节点样式(原生js和jquery)

ZFZ5720

03-06

1万+

<div id="parent"> 父标签 <div id="children"> 子标签 </div> </div> 一、原生js 只要获取子节点对象，然后对其父节点的样式修改即可。 document.getElementById('children').parentNode.style.over...

原生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

原生js获取给元素添加样式加！important

06-09

可以使用以下代码： ...例如，如果要将元素的背景色设置为红色，并强制覆盖可能存在的其他样式，可以这样写： ```javascript element.style.setProperty('background-color', 'red', 'important'); ```