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

js 中的‘-’问题

  •  
  •   aglsv · 2020-08-13 20:30:36 +08:00 · 3374 次点击
    这是一个创建于 1600 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想写个点击那个 tab 时那个 tab 的下边框变橙色,但是 js 里不能写 - 符号,想问问这种情况该怎么解决

    
                    tab[i].onclick = function(){
                        
                        tab[x].style.border-bottom = '0';
                        
                        tab[this.index].style.border = 'lightsalmon solid 4px';
                        songContent[x].style.display = 'none'
                        songContent[this.index].style.display = 'block'
                        x=this.index
                    }
    
    21 条回复    2020-08-14 23:06:15 +08:00
    Jaosn
        1
    Jaosn  
       2020-08-13 20:34:23 +08:00
    这种功能根本不需要 JS

    li :hover {
    border-bottom: 1px solid xxx;
    }
    lisianthus
        2
    lisianthus  
       2020-08-13 20:36:20 +08:00 via iPhone
    -后面的字母大写
    hoyixi
        3
    hoyixi  
       2020-08-13 20:39:11 +08:00   ❤️ 1
    驼峰写法,backgroundColor
    borderBottomStyle,borderBottomWidth,具体可以查 MDN
    shenyu1996
        4
    shenyu1996  
       2020-08-13 20:40:24 +08:00
    border-bottom -> borderBottom
    Curtion
        5
    Curtion  
       2020-08-13 20:40:57 +08:00   ❤️ 1
    你把 style 对象打印出来看一看就知道都变成了小驼峰写法: borderBottom ;如果确实要用时请用['border-bottom']这种方式取属性值
    lisianthus
        6
    lisianthus  
       2020-08-13 20:41:42 +08:00 via iPhone   ❤️ 1
    @lisianthus tab[x].style.borderBottom = '0';
    DoUSeeMe
        7
    DoUSeeMe  
       2020-08-13 21:11:55 +08:00
    > tab[x].style['border-bottom'] = '0';

    拿走不谢

    另 驼峰 也可
    zzx0403
        8
    zzx0403  
       2020-08-13 23:56:54 +08:00
    获取 dom 对象里的 style 找到想要的 key
    Bluevect
        9
    Bluevect  
       2020-08-14 00:26:07 +08:00 via Android
    楼上驼峰正解 borderBottom
    aaronlam
        10
    aaronlam  
       2020-08-14 00:34:27 +08:00   ❤️ 1
    JS 有两种读取属性的方法,

    第一种:点语法,例如:foo.bar
    第二种:中括号语法,例如:foo['bar']

    中括号语法,可以解决楼主你这种情况。另外针对你这种情况,还可以使用点语法属性名采用小驼峰即可。
    wunonglin
        11
    wunonglin  
       2020-08-14 01:46:33 +08:00   ❤️ 2
    你这种需求只需要先定义好 class,然后用 classList 动态添加 class 名就能解决了的,你这把样式写 js 一堆乱
    wi
        12
    wi  
       2020-08-14 08:23:16 +08:00
    使用 TypeScript 你就会看到所有 Dom 属性的定义
    PinkRabbit
        13
    PinkRabbit  
       2020-08-14 08:43:32 +08:00
    css 可解决,或者驼峰
    bojackhorseman
        14
    bojackhorseman  
       2020-08-14 09:04:39 +08:00
    动态切换 css class 更好吧
    Doracis
        15
    Doracis  
       2020-08-14 09:07:25 +08:00   ❤️ 1
    一般是选中加个 active 的 css class,然后定义.class{...}
    azcvcza
        16
    azcvcza  
       2020-08-14 09:08:03 +08:00
    动态改 class 名就行了,把 css 风格和 js 硬赋值解耦,以后改就改 class 名,不用去翻 js 代码了
    zhw2590582
        17
    zhw2590582  
       2020-08-14 09:21:38 +08:00
    经验之谈,能用 css 解决的就不要用 js
    aglsv
        18
    aglsv  
    OP
       2020-08-14 14:51:20 +08:00
    @DoUSeeMe 多谢
    aglsv
        19
    aglsv  
    OP
       2020-08-14 14:52:24 +08:00
    @aaronlam 一直是加.都忘了还有中括号
    aglsv
        20
    aglsv  
    OP
       2020-08-14 15:03:40 +08:00
    @wunonglin 才知道有这么个方法,多谢
    aaronlam
        21
    aaronlam  
       2020-08-14 23:06:15 +08:00
    @aglsv

    中括号是对于一些不符合规范的属性名来使用的,例如 foo['1.2'];
    或者,还可以使用表达式,例如:foo.[getPropertyName()]
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1027 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:23 · PVG 06:23 · LAX 14:23 · JFK 17:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.