I can use CSS to style an element so that it changes appearance when active.  For instance:  .test:active {      background-color: yellow; }   But how do I do this in javascript if I want to apply it to a specific element, not by class?  I can set the background color for the default state using:  document.getElementById("myid").style.backgroundColor = "yellow"   But I can't do this:  document.getElementById("myid").style.active.backgroundColor = "yellow"   I don't want the javascript to respond to the element being active or not - I want to do a static initialization in javascript that then makes a specific element have a different color when it is active.  If the element was guaranteed to have an id I could use javascript to append a style sheet rule which used the #id selector, but I don't have this guarantee.  All I can be sure of is I will get a reference to an element and I need to style it so that it has a different color when active.
24664
I'm looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript.  So an analogue of the CSS code: a:hover { color: red } in JS.  I couldn't find the answer anywhere else; if anyone knows that this is something browsers do not support, that would be a helpful result as well.
20516
I've actually reached the bottom of Google trying to figure out how to add a css class to each row of a view.  The trick is that I need the class for each row to be dynamically determined based on some of the data from the node that the view pulls from.  The function that pulls this off neatly for the node is -   function pgc_preprocess(&amp;$variables) {   $node = $variables['node'];   if ($node-&gt;type == "event") {     $variables['event_class'] = '';     $num_trainers = $node-&gt;field_number_of_trainers[0]['value'];     $count = count($node-&gt;field_trainer);     if($count &lt; $num_trainers) {         $variables['event_class'] = 'red';     } else {         $variables['event_class'] = 'green';     }     return $variables;   } }   The point of this is to color code an event that hasn't had enough folks sign up.  There will be a list of events on the front page, and I need  them to be color coded also.  I really hope there some simple solution along the lines of -  function pgc_preprocess_views_view_unformatted(&amp;$variables) {   // Magic here, preferably having something to    // do with the function I already wrote. }   Just dropping &lt;?php print $event_class ?&gt; in the view .tpl doesn't do it.
27914
Is it possible to highlight text inside of a textarea using javascript? Either changing the background of just a portion of the text area or making a portion of the text selected?
21162
I am trying to style all the HTML elements by making a custom style sheet. Till now, i have succeeded in making only the radio-buttons and check-boxes.  is the link for the demo. I wanted to know what are the formal guidelines for UI designing while styling these controls so that they appear more clickable. And what more could be done to make the example more pleasant looking.
48100
I think I must have changed a setting by accident.    Whenever I select an object and do any operation on it (move, rotate, scale, etc), suddenly the boxes in the Transform tab become yellow and the Animate property settings (The diamonds next to the yellow boxes on the right hand side of the photo) become activated.  I don't know what these are and what these do (I don't think they do anything atm), but I know this is not the default behavior.  How can I change this back to default behavior? (i.e. no yellow boxes, no diamonds)
106502
Below is my code. How do I add a background colour to the first row (only the first row, please)?  \begin{table}[!htb]     \centering     \begin{tabular}{c c c}         \toprule         \textbf{Temperature} [K] &amp; \textbf{Thickness}$[\mu m]$ &amp; \textbf{Permittivity}\\         \midrule         $H \# /k$ &amp; K &amp; 17762 \\         \bottomrule     \end{tabular}
31400
I'm trying to capture the display css property value for an element. However, unless I set style.display value in js it doesn't work. HTML: &lt;div class =&quot;dropdown slds-size_1-of-4&quot; &gt;    &lt;p&gt;A&lt;/p&gt;    &lt;p&gt;B&lt;/p&gt;    &lt;p&gt;C&lt;/p&gt; &lt;/div&gt;  CSS: .dropdown{     position: absolute;     display: none;     background: white; }  JS: Below JS method is be called from one of the input boxes in html: updateDropDownStyle(){    console.log('display : '   ,this.template.querySelector('.dropdown').style.display); }  However, the console prints nothing at all. However, if in the same method I set the element.style.display value as none and then try to console the above - it prints none. What's the issue here?
82056
I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" an element &mdash; ie. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?
19582
If I set a CSS value on a specific element using:  $('#element').css('background-color', '#ccc');   I want to be able to unset that element-specific value and use the cascaded value, along the lines of:  $('#element').css('background-color', null);   But that syntax doesn't seem to work – is this possible using another syntax?  Edit: The value isn't inherited from the parent element – the original values comes from an element-level selector. Sorry for any confusion!
37877
I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:  $('myObject').css('background-image', imageUrl);   This seems to be not working, as:  console.log($('myObject').css('background-image'));   returns none.  Any idea, what I am doing wrong?
98146
Every time I toggle active class in a list (to dynamically change DOM content) I find that I always go to this approach to check and clear which class is active. I'm still fairly new to using pure javascript so I'm wondering if there is a better, simpler approach?  It feels like having to run a second function to clear out all active classes seems grunty.   I've included an example of how I do it.    var specialNav = document.getElementById("special-nav");  if (specialNav) {   var navItems = specialNav.getElementsByTagName('li');   var i;   for (i = 0; i &lt; navItems.length; i++) {     navItems[i].addEventListener("click", function() {       if (!this.classList.contains('active')) {         clearActives(navItems);         this.classList.toggle('active');       }     });   } }  function clearActives(classlist) {   if (classlist) {     for (i = 0; i &lt; classlist.length; i++) {       classlist[i].classList.remove('active');     }   } } .active {   color: red }  li {   cursor: pointer; } &lt;div id="special-nav"&gt;   &lt;ul&gt;     &lt;li class="active"&gt; 1&lt;/li&gt;     &lt;li&gt;2&lt;/li&gt;     &lt;li&gt;3&lt;/li&gt;     &lt;li&gt;4&lt;/li&gt;   &lt;/ul&gt; &lt;/div&gt;
68766
I know it is possible to add new CSS classes definitions at runtime through JavaScript. But... How to change/remove CSS classes definitions at runtime? For instance, supose a I have the class below: &lt;style&gt; .menu { font-size: 12px; } &lt;/style&gt;  What I want is, at runtime, change the font-size rule of the .menu class, so that every element in the page who uses this class will be affected. And, I also want to know how to remove the .menu class definition.
35183
I'm pulling items out of the DOM with jQuery and want to set a property on an object using the id of the DOM element.   Example  const obj = {}  jQuery(itemsFromDom).each(function() {   const element = jQuery(this)   const name = element.attr('id')   const value = element.attr('value')    // Here is the problem   obj.name = value })   If itemsFromDom includes an element with an id of "myId", I want obj to have a property named "myId". The above gives me name.  How do I name a property of an object using a variable using JavaScript?
19983
I would like to know how to theme Drupal 7  elements? I want to change the HTML structure of every element, not just wrap form with div or something like that. And I want to leave theme's elements as they were.  EDIT: I would like to add class to label and input type radio button.
48227
I am building a Sharepoint 2013 App in Javascript / HTML / CSS and I want to implement / inherit the color / class / css used by the theme.  How do I do this?  I want to ensure consistency through usage of the same colors.  Thanks in advance!
61949
Is there a way to select a parent element based on the class of a child element in the class?  The example that is relevant to me relating to HTML output by a nice menu plugin for .  The output renders like this:    &lt;ul class="menu"&gt;       &lt;li&gt;           &lt;a class="active"&gt;Active Page&lt;/a&gt;       &lt;/li&gt;       &lt;li&gt;             &lt;a&gt;Some Other Page&lt;/a&gt;       &lt;/li&gt;   &lt;/ul&gt;     My question is whether or not it is possible to apply a style to the list item that contains the anchor with the active class on it.  Obviously, I'd prefer that the list item be marked as active, but I don't have control of the code that gets produced.  I could perform this sort of thing using javascript (JQuery springs to mind), but I was wondering if there is a way to do this using CSS selectors.  Just to be clear, I want to apply a style to the list item, not the anchor.
13755
Title pretty much sums it up.  The external style sheet has the following code:  td.EvenRow a {   display: none !important; }   I have tried using:  element.style.display = "inline";   and  element.style.display = "inline !important";   but neither works. Is it possible to override an !important style using javascript.  This is for a greasemonkey extension, if that makes a difference.