推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
aglsv

js 中的‘-’问题

  •  
  •   aglsv · Aug 13, 2020 · 4812 views
    This topic created in 2275 days ago, the information mentioned may be changed or developed.

    想写个点击那个 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 replies  •  2020-08-14 23:06:15 +08:00
    Jaosn
    Jaosn
    Aug 13, 2020
    1
    这种功能根本不需要 JS

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

    拿走不谢

    另 驼峰 也可
    zzx0403
    zzx0403
    Aug 13, 2020
    8
    获取 dom 对象里的 style 找到想要的 key
    Bluevect
    Bluevect
    Aug 14, 2020 via Android
    9
    楼上驼峰正解 borderBottom
    aaronlam
    aaronlam
    Aug 14, 2020❤️1
    10
    JS 有两种读取属性的方法,

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

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

    中括号是对于一些不符合规范的属性名来使用的,例如 foo['1.2'];
    或者,还可以使用表达式,例如:foo.[getPropertyName()]
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2715 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 52ms · UTC 13:40 · PVG 21:40 · LAX 05:40 · JFK 08:40
    ♥ Do have faith in what you're doing.