How can you assign a class to an id in css or javascript?


Tags: javascript,html,css

Problem :

Right now, every text box I make looks like this:

<input type="text" class="disableHotkeys">

Elsewhere, I have code that disables hot keys whenever an element of class "disableHotkeys" is focused on, and enables when all are blurred.

This all works fine, but I'd rather input elements were of class "disableHotkeys" by default as to clean up the code, and be less repetitive.

What I want is something like this:

default.css:

//don't use this code
input
{  include .disableHotkeys;  }

Is there a way of doing this in the css?

If not, I imagine there is a way to add the class to everything with JQuery after page load, but it seems like bad form to set the class outside of the places developers would usually look (the html/php file, and maybe the css).

P.S. if you have a better title, it would be appreciated



Solution :

Unfortunately, with CSS only, you're not able to do it. You need to use JS. I am giving you a jQuery example -

$(document).ready(function(){
    $('input').addClass('disableHotkeys');
});

or

$(document).ready(function(){
    $('input').each(function(){
        $(this).addClass('disableHotkeys');
    });
});

And also if you need to add class to all input then why dont put disableHotkeys class code to input?


    CSS Howto..

    How to align stacked Font-Awesome icons correctly

    CSS height, How to get it to go around inner divs

    How to make a div to represent a dotted line?

    How to override global style for img tag in css

    How to keep indent for second line in ordered lists via CSS?

    How to get the CSS width of a mobile device in ASP.NET MVC?

    Why do small spaces keep showing up in my web pages?

    In CSS, how can I give two styles to same div according to its level on a
      list?

    How to avoid text selection in web page using css?

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How to create e-commerce website [closed]

    how to elegantly use css sprites in an inline element?

    How about taking out Bootstrap style? [closed]

    how to resize background image of body in aspx page

    How to remove excess space added with \n

    CSS how to select first occuring element after another element

    How to position absolute in scrollable area? (Css)

    how to i convert this asp.net list to html list?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How to exclude the container from this javascript code?

    How to fixed image on every screen resolution?

    How to Override/Undo CSS Class Attributes for Twitter Bootstrap

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to place a button in the middle of the page using HTML and CSS

    CSS Positioning - How can you fix components in place?

    How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

    How can I register a css page from an ascx control?

    How to prevent fixed positioned element overlapping others elements in css?

    How to use cross domain dynamically generated CSS