使用Javascript函数更改CSS样式

Question

I am trying to change a CSS style whenever a button is clicked. To do this I have a Javascript function which defines a new class for CSS (as well as several other things). Currently the JS function looks like this:

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;'
}

*i took out a lot on unnecessary code. if you think the problem doesn't have to do with the class, can can add in the rest of the function.

The html for the section that uses this is:

<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>

From what i can tell, I believe i formatted the class within the function wrong, so it isn't being used even though the data is found. However, I am unsure of how to actually fix this.

Answer 1

为什么不使用简单的document.getElementById（'yourid'）。setAttribute（'style'，'color：red'）？

Answer 2

This can be done without using any jquery or JavaScript. But you will need to restructure your HTML

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

And then use the active psuedo class to add the effect

.btn:active .ouch { color: red}

Further info https://css-tricks.com/pseudo-class-selectors/

Answer 3

Why don't you use jQuery? http://jquery.com

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