vue.js中的组件缺失部分css样式是怎么回事

html-css017

vue.js中的组件缺失部分css样式是怎么回事,第1张

<el-table-column>并不是一个dom节点，所以infotext这个类究竟用在哪，需要看下el-table-column这个组件的实现才知道。

用了第三方组件的必然都会遇到你这样的问题，我说下我的解决方法，不一定是好的。

一个vue文件可以写多个<style></style>，加上socped代表本组件的样式，不污染全局。如果需要覆盖第三方组件样式，则不能加scoped，因此需要另写一个<style>.xxx-component{...}</style>，这里用一个大类包裹防止污染全局。

接着，我用比较笨的方法(有好的方法请告知)，就是打开f12检查究竟要覆盖哪些样式，然后写在没有加scoped的style里即可。

其实一些好的第三方UI库都有提供自定义样式的方法的，这样实现起来才是最便捷的。

css中带中横线的样式属性对应到js里面的命名规则为：

去掉中横线，中横线后的首字母大写，如你上面的例子即为：style.textDecoration

另外，你要把这个层里所有a都要改变这样的样式：

document.getElementById("yourDivId").getElementsByTagName("a").style.textDecoration = "none"

如果你用了jQuery库，参考楼上的，否则用下面的代码：

function bj(){

var divNodes = document.getElementsByTagName("div")

for(var i=0,j=divNodes.lengthi<ji++){

var divObj = divNodes[i]

if(divObj.className == "caa" || divObj.className == "cab") {

divObj.style.background = "url(xx.jpg) no-repeat fixed left top"

}

}

}