js语句getElementById修改style如何加入变量

var styleName = 'left';
documentgetElementById('a')style[styleName]='100px';

js中取对象的属性可以用点或者中括号[]

比如上面的js还可以是

documentgetElementById('a')['style'][styleName]='100px';

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的，效果如下：

    开始做的时候，查看了一下element官方文档（传送门： Element官方文档 ），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：
css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用el-step__icon类设置定位，用 el-stepis-horizontal el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。

正常情况下style属性中的级别是最高的，但是在样式表中可以用”声明（important）“加强该属性的级别，如：
<div class="demo" style="width: 100px;height: 100px;background: red;"></div>
demo {
background: blue;
}
上面的写法div的背景色显示为红色，但如果我们这样写：
demo {
background: blue!important;
}
div的背景就变为蓝色了。

因为当我们进行修改，我们为了避免样式的冲突，一般会在style标签上写上scoped来避免冲突，这就造成了我们对element-ui无法修改的问题当我们把scoped删除之后可以看到样式是可以加上去的，那是因为使用scoped的时候编译全局引用的会覆盖写的css。不过，在我们项目中有不能把scoped删除，我们还可以不使用全局的引用的css，在使用element-ui的组件或者页面单独调用。这样就可以解决样式难以改变的问题。

elementstyle 这个是写在行内的样式，也就是在元素上，比如：

<h1 style='font-size:16px'><h1>

像这样书写的。如果在那个标签元素上没有找到这样的样式，那就可能是js生成的。

---