视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript中关于font-weight和fontWeight的区别
2020-11-27 20:15:29 责编:小采
文档


今天发现通过JS来设置一个元素的CSS样式,代码如下所示:

var js = document.getElementById('test-p');
js.style['font-weight'] = 'bold';

之后发现一个很奇怪的地方。我们通过

console.log(js.style.fontWeight);
console.log(js.style['font-weight']);
console.log(js.style['fontWeight']);

都可以在控制台输出之前设置的bold,或者是我们之前设置js.style.fontWeight = 'bold';就算我们是在CSS里面直接设置{font-weight: bold};也可以用上面三个方式在控制台输出设置的bold。

如果直接console.log(js.style);输出的这个对象中没有发现'font-weight'这个属性,只有'fontWeight',请问一下各位大大,这是为什么,为什么我们这里的'font-weight'和'fontWeight'会出现这种'等价'的情况,新手表示完全弄懵了,谢谢解答的各位。

在JS中,“-”代表减法操作符。所以font-weight代表font减去weight,test-p相当于test减p。

这是驼峰写法
js.style.font-weight 直接这样写会出错的
要么写成驼峰写法
js.style.fontWeight

要么写成style['property']

javascript作为浏览器脚本,自然要能够操纵css等东西

这里有个问题: css许多属性都以-作连接号,而javascript中,对象的属性绝不可以出现减号

于是,机智的作者灵光一闪: 不如在js里就用驼峰命名来访问css属性吧,这样看起来就不会太挫

从此,访问css属性时,你既可以用驼峰命名,也可以用减号连接命名了

下载本文
显示全文
专题