CODEWITHSUNDEEP
javascripthtmlcss
Graeham Broda
Graeham Broda

Reputation: 141

Change CSS style with Javascript function

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.

Upvotes: 1

Views: 7502

Answers (3)

Jon Ashdown
Jon Ashdown

Reputation: 175

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/

Upvotes: 0

Raiper34
Raiper34

Reputation: 537

Why you do not use simple document.getElementById('yourid').setAttribute('style', 'color: red') ?

Upvotes: 2

Joel Banzatto
Joel Banzatto

Reputation: 147

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

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

Upvotes: -1

Related Questions