javascript获取css文件内样式和行内样式的命令

因为把公司的第二块屏幕竖起来了, 当打开bitbucket的dashboard时, 右侧的recently viewed列表展示名称不全, 导致我不能快速的打开需要的项目, 因此又写了一个油猴脚本来干这个事.
使用chrome dev tools找到需要修改的属性为whiteSpace, 写了类似如下的脚本来更改:

1
2
3
4
5
6
7
8
var lis = document.getElementsByClassName('repository-list')[3].children;
for(var li in lis){
if(lis[li].tagName==="LI"){
console.log('before--> '+getComputedStyle(lis[li].children[0].children[1].children[0]).whiteSpace);
lis[li].children[0].children[1].children[0].style.whiteSpace='pre-line'
console.log('after-->'+lis[li].children[0].children[1].children[0].style.whiteSpace);
}
}

在更改前, style.whiteSpace的值为nowarp, 更改为pre-line即可达到我的目的, 在上述代码中:

1
2
getComputedStyle(element);
element.style.whiteSpace

是两种获取样式不同的方式, 第一种可以获取到 css file 中的样式, 而第二种则是获取到的行内样式.

参考链接:

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style