Develop Reference

How to add a class to a specific stylesheet?

I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.

It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.

This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");

To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;

javascript focus on div element using # id

hello what I want it is simply like in the image below :
I want if I add #element1 so the div which have the same id ="element1" so it will get colored somehow , I just want to know what to type on google so I can find a solution because I searched for javascript hash etc but without any success.

you need to use window.location.hash to get the hash value
so if your hash is #someId23
do something like:
if (window.location.hash){
$(window.location.hash).addClass('selected');
}

This answer will help you to focus div, then you can use 'div:focus, div:active' pseudo classes and add some animation there, there are a lot, google it
This is better than jQuery manipulation. Also page performance doesn't affected

CSS doesn't work after div id swap with js

Im trying to keep css working after swapping div id with js replace. I can't really figure it out i don't know what's wrong at all. Actually it's so simple that i don't even know what to think ...
<style>#WD4 { color:red; }</style>
<div id="60b0b9b1">qww4t</div>
<script>var x = document.body.innerHTML;x = x.replace('60b0b9b1', 'WD4');</script>
I just want color to apply. Im sure there's even more than one way around I just can't get it.
Big thanks in advance.
I actually forgot a few important things:
There are more than just one divs with 'WD4' ID
I can't edit document i can only inject my javascript code
I can't edit styles either

You can find the element by id:
document.getElementById("60b0b9b1").id = 'WD4';
FIDDLE
And your css is looking for #WD3 not #WD4

looks like you need to adjust your style to #WD4
Personally I would just add a css class to the element and not style the unique ID of the element.

Javascript cannot change style in css file?

Recently I made a archive box for my blog. Firstly I use style attribute for styling my list. But when I moved the css code in style attribute to a separate css file, my JS code didn't work. The following codes work fine when click the -> button.
But when I use class of css instead of style attribute, the JS code doesnt't work. I cannot see the sub list items on the screen when I click the -> button. So I don't want to use style attribute. Because it easy to read style code from css file in my website. What can I do for handling this problem? Any suggestion?
Note: Because "insert into post" button in code snippet tool doesn't work, I put codes as images into my post.

It's because you're checking the style attribute, which you're not setting anymore. Just assume that the thing is not visible when you don't see a value since that's the default.
if (!months.style.display || months.style.display == "none") {
months.style.display = "block";
}
After the first click the style attribute will have a value and it should work.

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage