Notifikationer

Markér alle som læst Log ud

pierre Nybegynder

12. august 2003 - 23:02 Der er 17 kommentarer

Overskrive en css værdi med javascript

Hey!

Hvordan overskriver man en css værdi med javascript?
Lad os sige vi har en css opsætning når siden hentes der siger:

.abc {background-color:#FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif;}

Når siden så er indlæst skal en af disse værdi'er i class'en så ændres ved brug af javascript, nogen der har en idé om hvordan man gør dette?

I håb om et fornuftigt svar,
-Pierre

Synes godt om

roenving Novice

13. august 2003 - 00:10 #1

Denne funktion kaldes med selector, property og nyværdi - små bogstaver, hvor ikke javascript udtrykkelig forlanger noget andet:

function changeCSSProperty(clss,propty,newValue){
var ie = (document.styleSheets[0].rules);
var moz = (document.styleSheets[0].cssRules);
if(!(ie||moz))return;
for(i=0;document.styleSheets.length>i;i++){
css = (ie)?document.styleSheets[i].rules:document.styleSheets[i].cssRules;
for(j=0;css.length>j;j++){
if(css[j].selectorText.toLowerCase()==clss){
eval("css[j].style."+propty+"='"+newValue+"'");
return;
}
}
}
}

Man kan ikke tage fat i rules, som ikke findes i forvejen, så denne metode dur _kun_ overfor definerede style-rules (altså ikke inline-rules, men det ser heller ikke ud til, at det er det du vil have !-)

PS. Javascript forlanger udtrykkelig store bogstaver i bl.a. præcis de ovenstående properties, nemlig:
backgroundColor og fontFamily -- der skal bruges interCap-formatet, når properties adresseres vha. javascript (altså bindestreger fjernes og erstattes af et stort bogstav som det næste !-)

PPS. Der er specielle problemer hvis en property indeholder ' -- pt. æder den "" men ikke ' ...

hth
jes

Synes godt om

bearhugx Nybegynder

13. august 2003 - 00:14 #2

ok . jeg har en løsning, men den forlader sig MEGET på DOM level 2...

i dette eksempel går jeg ind og ændrer background-color for .btn klassen

<html>
<style type="text/css">
.redBG {
background-color: red;
}
.btn {
padding: 3px;
border: 1px solid #333;
background-color: #ffd;
cursor: pointer;
}
</style>
<script type="text/javascript">
function getBrowserSpecificRuleList( stylesheet ) {
if( stylesheet.cssRules ) {
// Return w3c-compliant accessor;
return stylesheet.cssRules;
} else if ( stylesheet.rules ) {
// Return IE 5.0/6.0 (PC) specific accessor!
return stylesheet.rules;
}
return null;
}

function doGblCSSChng() {
rules = getBrowserSpecificRuleList( document.styleSheets[0] );
//alert( document.styleSheets[0].cssRules );

nRules = rules.length;
i=0;
while(i<nRules) {
rule = rules[i];
if( rule.selectorText == ".btn" ) {
alert("found .btn at index "+i);
rule.style.backgroundColor = "blue";
}
++i;
}
}
</script>
<body>
<h1 class="redBG"> HI THERE </h1>
<br/>
<a class="btn" href="#" onClick="doGblCSSChng(); return false;"> make it so... </a>
</body>
</html>

Synes godt om

roenving Novice

13. august 2003 - 00:22 #3

>>bearhugx

Kunne du ikke lide min løsning ?-)

-- eller havde du bare også siddet mere end en ½ time og prøvet at finde en løsning *g*

Synes godt om

bearhugx Nybegynder

13. august 2003 - 00:27 #4

yeps... og da jeg så endelig havde løsningen parat, så havde du lige kommet med et svar *LOL* :-/ --- men derfor skulle pierre da ikke snydes for min løsning heller :-)))

Især gik det mig på at IE6.0 IKKE godtog stylesheet[#].cssRules som ellers er w3c standard... MAC versionen af IE5 gør - men åbenbart ikke IE 5/6 (PC)...
Det brugte jeg oceaner af tid på :-/

det var først da jeg fandt PPK igen (http://www.xs4all.nl/~ppk/js/w3c_css.html) at jeg fik en aha oplevelse...

Jeg vil sige at din er meget smartere - men burde der ikke laves nogle "hop-ud-af-løkke-hvis-rulen-findes"-struktur (som jeg var igang med at implementere med while-løkke (som dog mangler det famøse "break")

Synes godt om

roenving Novice

13. august 2003 - 00:43 #5

Det gør den da:
return;

*lol*

Synes godt om

bearhugx Nybegynder

13. august 2003 - 00:44 #6

damn! .. havde lige overset det return :-)))

Synes godt om

bearhugx Nybegynder

13. august 2003 - 00:53 #7

jeg tænkte på - den eval sætning - er der nogen vej udenom den -- jeg har hørt at den skulle være rimlig ressource-krævende....

Synes godt om

bearhugx Nybegynder

13. august 2003 - 01:00 #8

jeg kan se, at hvis man kun kodede til Moz, så kunne man bruge setProperty-funktionen (ved at skrive (bruger roenvings kode))

if(css[j].selectorText.toLowerCase()==clss.toLowerCase() ){
css[j].style.setProperty(propty, newValue, null);
return;
}

Synes godt om

roenving Novice

13. august 2003 - 01:25 #9

Jeg måtte pille lidt, men ud fra min reference så det ikke ud til at der var en tilstrækkelig sikker metode, som opfyldte de andre krav jeg havde fået opfyldt ...

-- og det er klart et problem, ved voldsommere opdateringer, men jeg tror ikke li'e på, at man skal opdatere mange properties på een gang, så den købte jeg ...

Bare fordi, jeg ville have en generisk, for man kunne jo bare tage fat med en konkret property -- altså lave en funktion, som ændrede backgroundColor som din -- det var for kedeligt !-)

-- og overvej lige et af alternativerne, som er at skifte className på et antal elementer ...

Så snakker vi om noget ressource-krævende ...

Synes godt om

roenving Novice

13. august 2003 - 01:27 #10

-- og det var forøvrigt præcis setProperty jeg ledte efter i min bibel !-)

Synes godt om

bearhugx Nybegynder

13. august 2003 - 01:35 #11

roenving >> min kode var måske kedelig - men var også kun ment som en proof-of-concept --- ikke den store forkromede generiske løsning, som du har lagt for dagen.. Det er også derfor at jeg selv har taget din kode til mig (til mit private kode-bibliotek) i stedet for min egen...

Synes godt om

roenving Novice

13. august 2003 - 01:45 #12

Helt fint, men jeg blev lidt irriteret på mig selv, da jeg så Pierres spørgsmål -- det kan vel ¤#¤#%&¤#%¤# ikke være så svært at lave den generisk ?-)

-- og man skulle nok iøvrigt implementere din tilføjelse, så er det _kun_ javascript-property'en som _skal_ have et bestemt store/små-bogstaver-forhold !-)

Synes godt om

bearhugx Nybegynder

13. august 2003 - 01:47 #13

du mener clss.toLowerCase() ?

Synes godt om

bearhugx Nybegynder

13. august 2003 - 01:49 #14

som foriøvrigt nok burde hedde en selector, idet du også kunne sende "h1" eller "#topBar" afsted til funktionen :-)...

stærkt påvirket af din kode er følgende stump kommet i mit bibliotek :
<script type="text/javascript">
ieRules = (document.styleSheets[0].rules);
mzRules = (document.styleSheets[0].cssRules);

function getRuleList( stylesheet ) {
return (mzRules)?stylesheet.cssRules:stylesheet.rules;
}

function changeCSSProperty( selector, property, value ) {
if(!(mzRules||ieRules))
return;
for(iStylesheet=0; iStylesheet<document.styleSheets.length; ++iStylesheet) {
rules = getRuleList( document.styleSheets[iStylesheet] );
for(iRule=0; iRule<rules.length; ++iRule) {
if( rules[iRule].selectorText.toLowerCase() == selector.toLowerCase() ) {
eval("rules[iRule].style."+property+"='"+value+"'");
return;
}
}
}
}
</script>

Synes godt om

roenving Novice

13. august 2003 - 02:06 #15

-- hov, jeg tror ikke du må bruge ordet property, det var den første fejl jeg fik !-)

-- godt nok står hverken selector, property eller value på listen over reserverede ord, men der forsvandt altså en fejl, da jeg rettede til clss og propty ...

-- og er det ikke lidt fjollet at lægge en oneliner ud som funktion ?-)

Synes godt om

bearhugx Nybegynder

13. august 2003 - 02:13 #16

jeg får ingen fejl i IE 6.0 og Moz1.4 med at bruge property - men man kunne jo selvfølgelig lave dem om til sel, prop og val - for at undgå katastrofen...

ang onlineren - jo .. jeg kan se at jeg ikke har fået refaktoreret koden ordenligt -den vil selvfølgelig ryge ned i changeCSSProperty-funktionen som

rules = (mzRules) ? document.styleSheets[iStylesheet].cssRules : document.styleSheets[iStylesheet].rules;

:-)

PS: vi ses vel på lørdag - gør vi ikke ?

Synes godt om

roenving Novice

13. august 2003 - 02:28 #17

Jeg tror man kan sige at risikoen foreligger *lol*

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS