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'）？

Answer 2

这可以在不使用任何jquery或JavaScript的情况下完成。但您需要重新构建HTML

<button class="btn">click me<span class="ouch"></span></button>

然后使用活动的psuedo类添加效果

.btn:active .ouch { color: red}

更多信息https://css-tricks.com/pseudo-class-selectors/

Answer 3

为什么不使用jQuery？ http://jquery.com

$(function(){
   $('button').click(function(){
      $('#attrib').css({
         color: 'red'
      });
   });
});

使用Javascript函数更改CSS样式

3 个答案: