javascript - 使用 Javascript 函数更改 CSS 样式

Question

我试图在单击按钮时更改 CSS 样式。为此，我有一个 Javascript 函数，它为 CSS(以及其他一些东西)定义了一个新类。目前 JS 函数看起来像这样:

scope.dropChange = function(dropValue, dataType) {
    scope.checkChangeCol = {
        'width': '8px;',
        'height': '20px;',
        'border': 'solid #000;',
        'border-width': '0 3px 3px 0;',
        'padding-left':'0px;',
        'margin-left':'13px;',
        '-moz-transform': 'rotate(45deg);',
        '-webkit-transform': 'rotate(45deg);',
        '-o-transform': 'rotate(45deg);',
        '-ms-transform': 'rotate(45deg);',
        'margin':'auto;'
}

*我去掉了很多不必要的代码。如果您认为问题与类无关，可以添加函数的其余部分。

使用它的部分的 html 是:

<table class=buttons-table>
    <tr style="line-height: 100px;">
        <td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('all')">All</button>
        <td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('room')">Room</button>
        <td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('floor')">Floor</button>
        <td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('building')">Building</button>

    </tr>

    <tr>
        <td><div style="{{checkChangeCol}}" class="checkmark"></div>
        <td><div class="checkmark"></div>
        <td><div class="checkmark"></div>
        <td><div class="checkmark"></div>

    </tr>

    <tr>
        <td>checkChangeCol = {{checkChangeCol}}
    </td>
</table>

据我所知，我相信我在函数中对类进行了格式化，因此即使找到了数据也没有被使用。但是，我不确定如何真正解决这个问题。

Answer 1

为什么不使用简单的 document.getElementById('yourid').setAttribute('style', 'color: red') ？