By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,677 Members | 1,094 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,677 IT Pros & Developers. It's quick & easy.

accesing to the hover style with javascript

P: n/a
Hi.

I need to access to the hover style of an element with javascript. How
can i do this?

Best regards
Manuel

Mar 16 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
<mf*****@gmail.comwrote:
I need to access to the hover style of an element with javascript. How
can i do this?
u can bothe add a css rule of modify an existing one.

suppose the declared css is :

a.myClass:hover {<the directives}

in that case u want to modify an existing style.

first u'll have to loop over all the styles nodes, using DOM, in order
to find the selector text "a.myClass:hover ", we will call it by a
variable name "selector" and the new rules "newRules" then :

var rgs=new RegExp('\\s*'+selector+"\\s*","g")
var css=document.styleSheets;
for(var k=0;k< css.length;k++){
var rules=document.styleSheets[k].cssRules;
for(var i=0;i<rules.length;i++){
if(rgs.test(rules[i].selectorText)) {
rules[i].style.cssText=newRules;
}
}
}
with, for example :

selector="a.myClass:hover";
newRules="padding:0 15px 0 1em; background:#fcefab;";

or, u might want to change only one property for example :

property="background";
value="blue";

in that case i'll have to split the cssText of the rule corresonding to
the selector like :

var cssTexts=rules[i].style.cssText.split(';');
then loop over the properties to change the "background :

for(var j=0;j<cssTexts.length;j++){
if(rgp.test(cssTexts[j])) cssTexts[j]=property+':'+value;
}

using another Regexp :
var rgp=new RegExp('^\\s*'+property+"\\s*:","g")

then restore the whole cssText by :
rules[i].style.cssText=cssTexts.join(';');

that's all if u want to change a property for a given selector.

It is much more easier to *add* a new rule if the rule corresponding to
the selector doesn't exists :

saying we have :
var aRule='h1, h3 {color:red;background:#666;}';
suppose, worst case, we don't have *any* <style ... /in the document
head then :

var head=document.getElementsByTagName('head')[0];
var style=document.createElement('style');
style.type='text/css';
head.appendChild(style);
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[0].insertRule(aRule,0);

otherwise, simplest case, their is allready some styles nodes in your
document, then :

var stylesLen=document.getElementsByTagName('style').l ength;
var
rulesLen=document.getElementsByTagName('style')[stylesLen-1].cssRules.le
ngth;
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[stylesLen-1].insertRule(aRule,rulesLen);
Mar 16 '07 #2

P: n/a
On 16 mar, 20:02, unbewusst.s...@wortanschahung.com.invalid (Une
Bévue) wrote:
<mfc1...@gmail.comwrote:
I need to access to the hover style of an element with javascript. How
can i do this?

u can bothe add a css rule of modify an existing one.

suppose the declared css is :

a.myClass:hover {<the directives}

in that case u want to modify an existing style.

first u'll have to loop over all the styles nodes, using DOM, in order
to find the selector text "a.myClass:hover ", we will call it by a
variable name "selector" and the new rules "newRules" then :

var rgs=new RegExp('\\s*'+selector+"\\s*","g")
var css=document.styleSheets;
for(var k=0;k< css.length;k++){
var rules=document.styleSheets[k].cssRules;
for(var i=0;i<rules.length;i++){
if(rgs.test(rules[i].selectorText)) {
rules[i].style.cssText=newRules;
}
}
}

with, for example :

selector="a.myClass:hover";
newRules="padding:0 15px 0 1em; background:#fcefab;";

or, u might want to change only one property for example :

property="background";
value="blue";

in that case i'll have to split the cssText of the rule corresonding to
the selector like :

var cssTexts=rules[i].style.cssText.split(';');
then loop over the properties to change the "background :

for(var j=0;j<cssTexts.length;j++){
if(rgp.test(cssTexts[j])) cssTexts[j]=property+':'+value;
}

using another Regexp :
var rgp=new RegExp('^\\s*'+property+"\\s*:","g")

then restore the whole cssText by :
rules[i].style.cssText=cssTexts.join(';');

that's all if u want to change a property for a given selector.

It is much more easier to *add* a new rule if the rule corresponding to
the selector doesn't exists :

saying we have :
var aRule='h1, h3 {color:red;background:#666;}';
suppose, worst case, we don't have *any* <style ... /in the document
head then :

var head=document.getElementsByTagName('head')[0];
var style=document.createElement('style');
style.type='text/css';
head.appendChild(style);
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[0].insertRule(aRule,0);

otherwise, simplest case, their is allready some styles nodes in your
document, then :

var stylesLen=document.getElementsByTagName('style').l ength;
var
rulesLen=document.getElementsByTagName('style')[stylesLen-1].cssRules.le
ngth;
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[stylesLen-1].insertRule(aRule,rulesLen);
oh, thank you very much.

that was what needed

Mar 16 '07 #3

P: n/a
ASM
mf*****@gmail.com a écrit :
Hi.

I need to access to the hover style of an element with javascript. How
can i do this?
Not clear ...
An example ?
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 17 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.