V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

通过 getElementById 有多个 class,怎么修改某个 指定 class 的样式?

  •  
  •   lisisi · 2020-02-28 12:09:43 +08:00 · 3134 次点击
    这是一个创建于 1490 天前的主题,其中的信息可能已经有所发展或是发生改变。

    把 .xyz { width: 100px } 改成 200px; 怎么通过 getElementById 的方式修改 class 中 xyz 的 样式?

    <div id="id123" class="abc zyz">hello</div>
    
    .abc { font-size: 18px; }
    .xyz { width: 100px; }
    

    (getElementByclassname 的话,页面中 xyz 的总数不好确定,所以不想通过这个方式获取)

    17 条回复    2020-02-29 15:26:34 +08:00
    imn1
        1
    imn1  
       2020-02-28 12:16:53 +08:00
    你是要 runtime 还是永久更改?
    前者不需要理会 class,后者不是 javascript 的事
    lisisi
        2
    lisisi  
    OP
       2020-02-28 12:18:26 +08:00
    @imn1 runtime,查了下貌似是用 classlist 解决
    lisisi
        3
    lisisi  
    OP
       2020-02-28 12:21:55 +08:00
    @imn1 现在处理的方式很丑陋,把 xyz 先删了,再添加了一个新的 class。不了解怎么能直接修改掉 xyz 中的 width
    imn1
        4
    imn1  
       2020-02-28 12:25:31 +08:00   ❤️ 1
    @lisisi
    我是搞不清楚
    byId 获取的是唯一元素,直接改它的 width 属性就是了
    难道你是想通过这个元素,找到某个 class,然后改掉,让其他也用这个 class 的元素也发生变化?
    wangcheng
        5
    wangcheng  
       2020-02-28 12:53:01 +08:00
    ````javascript
    const styleEl = document.createElement('style');
    document.head.appendChild(styleEl);
    styleEl.sheet.insertRule('.xyz { color: red }');
    ````
    xzh654321
        6
    xzh654321  
       2020-02-28 12:55:33 +08:00
    你意思想修改 id=123 且 class=xyz 的 div 的样式?
    wangcheng
        7
    wangcheng  
       2020-02-28 13:02:23 +08:00
    没明白你的目的是啥。
    如果是想修改所有 class 为 xyz 的样式,那直接修改就好了。跟 getElementById 有什么关系?
    如果是想修改 id123 这个元素的样式,直接修改它的样式就好了,为什么非要通过修改 xyz 这个 class 的样式来修改?
    ironMan1995
        8
    ironMan1995  
       2020-02-28 13:10:10 +08:00 via Android
    可以用 querySelectorAll 或者 querySelector,不建议使用 getElementByClassName
    ZredoC
        9
    ZredoC  
       2020-02-28 14:12:07 +08:00
    #8 对的,看了下文档 querySelectorAll 是 H5

    css 后定义的样式会覆盖掉原有的样式啊,有点没看懂到底想说啥

    ```
    // 获取所有使用了 xyz 样式的元素数组
    var elements = document.querySelectorAll(".xyz");
    // 遍历修改
    for (var i = 0; i < elements.length; i++) {
    elements [i].style.width = 200px;
    }
    ```

    为什么会不好确定数量呢,总数不都是数组对象的 length 属性么
    ZredoC
        10
    ZredoC  
       2020-02-28 14:17:17 +08:00 via Android
    @ZredoC #9 elements[i] 无空格
    ZredoC
        11
    ZredoC  
       2020-02-28 14:22:00 +08:00 via Android
    @ZredoC "200px"🙄
    randyo
        12
    randyo  
       2020-02-28 14:35:30 +08:00 via Android
    不能改已写好的 CSS 文件,只能用新样式覆盖
    jinliming2
        13
    jinliming2  
       2020-02-28 15:07:47 +08:00 via iPhone
    > “ 页面中 xyz 的总数不好确定”?
    首先,改某个 class 的样式,肯定是全局生效的(不考虑 shadowRoot ),所以你不可能单独改一个 element 上面 .xyz 的样式。
    然后,改 class 样式的话,可以创建一个 style 标签,里面写覆盖样式,然后插入到 body 的最后面。
    如果你只是想改单独的这一个 element 的样式的话,getElementById 之后,直接 element.style.width='200px' 就行。
    ajaxfunction
        14
    ajaxfunction  
       2020-02-28 16:03:54 +08:00
    你需要 jQuery
    mostkia
        15
    mostkia  
       2020-02-28 16:31:51 +08:00
    建议准备好需要的 style,然后改 class 名称调用就可以了。只有未知的或者是实时计算得出的 style 才没法预先写到 css 文件里。
    mxT52CRuqR6o5
        16
    mxT52CRuqR6o5  
       2020-02-28 20:45:38 +08:00 via Android
    直接行内样式怼上去里就完事了
    kyuuseiryuu
        17
    kyuuseiryuu  
       2020-02-29 15:26:34 +08:00
    定义一个新的样式
    .xyz .width200 {
    width: 200px;
    }

    然后给 element 加个 width200 的 class
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1713 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:41 · PVG 00:41 · LAX 09:41 · JFK 12:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.