技术解析

js 中的‘-’问题
0
2021-08-13 14:00:46
idczone

想写个点击那个 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
                }

这种功能根本不需要 JS
li :hover {
border-bottom: 1px solid xxx;
}

-后面的字母大写

驼峰写法,backgroundColor
borderBottomStyle,borderBottomWidth,具体可以查 MDN

border-bottom -> borderBottom

你把 style 对象打印出来看一看就知道都变成了小驼峰写法: borderBottom ;如果确实要用时请用['border-bottom']这种方式取属性值

tab[x].style.borderBottom = '0';

> tab[x].style['border-bottom'] = '0';
拿走不谢
另 驼峰 也可

获取 dom 对象里的 style 找到想要的 key

楼上驼峰正解 borderBottom

JS 有两种读取属性的方法,
第一种:点语法,例如:foo.bar
第二种:中括号语法,例如:foo['bar']
中括号语法,可以解决楼主你这种情况。另外针对你这种情况,还可以使用点语法属性名采用小驼峰即可。

你这种需求只需要先定义好 class,然后用 classList 动态添加 class 名就能解决了的,你这把样式写 js 一堆乱

使用 TypeScript 你就会看到所有 Dom 属性的定义

css 可解决,或者驼峰

动态切换 css class 更好吧

一般是选中加个 active 的 css class,然后定义.class{...}

动态改 class 名就行了,把 css 风格和 js 硬赋值解耦,以后改就改 class 名,不用去翻 js 代码了

经验之谈,能用 css 解决的就不要用 js

多谢

一直是加.都忘了还有中括号

才知道有这么个方法,多谢


中括号是对于一些不符合规范的属性名来使用的,例如 foo['1.2'];
或者,还可以使用表达式,例如:foo.[getPropertyName()]

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服