10 svar · 317 visningar · startad av Jesper T
Går det på någe vis att ändra stil på en extern sida i en frame om man vet vad elementklassen heter?
Ex. i framen så öppnas en sida med ett antal divar. Dessa har på denna sida en svart ram. Nu vill jag att ramen/arna skall förefalla röda i min frame.
(divarnas class är "divinfo")
Jorå det går.
Nu ska vi se om jag förstod dig rätt.. ;)
[red]<html>
<body>
<iframe src="frame.htm" name="foo"></iframe>
<p>
<a href="javascript:void(parent.foo.bar.className='divinfo_red');">Röd ram</a> |
<a href="javascript:void(parent.foo.bar.className='divinfo');">Svart ram</a>
</p>
</body>
</html>[/red]
Iframe´n:
[red]<html>
<head>
<style type="text/css">
.divinfo { border: 1px solid #000; }
.divinfo_red { border: 1px solid red; }
</style>
</head>
<body>
<div class="divinfo" id="bar">
Hybrid-DNA-tekniken fick sitt genombrott 1953.
</div>
</body>
</html>[/red]
Nästan....
Jag hade tänkt alla objekt med ett visst klassnamn och inte ett specifikt id.
Dessutom så skulle det vara extra bra om styletaggarna låg på sidan med iframen.(kanske inte går)
Ok, det där är överkurs för mig. ;)
Ta en titt här kanske:
http://www.webforum.nu/showthread.php?s=&postid=686211#post686211
Någon med mer erfarenhet(läs jojoxx, peter s, mfl.) kanske kan svara på frågan om det överhuvud taget är möjligt. Så kanske jag kan lista ut resten.... :)
Jag trodde du provade länken ovan :)
Har moddat exemplet lite:
<script type="text/javascript">
function getStyleClassByName(className){
if(document.all){
for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
for(var rule=0;rule<foo.document.styleSheets[styleSheet].rules.length;rule++){
if(foo.document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].rules[rule]; }
}
}
} else if(document.getElementById){
for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
for(var rule=0;rule<foo.document.styleSheets[styleSheet].cssRules.length;rule++){
if(foo.document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].cssRules[rule]; }
}
}
}
return null;
}
</script>
<a href="#" onClick="getStyleClassByName('minklass').style.color='blue';">Blå</a>
<iframe src="iframe.html" name="foo" width="400" height="300"></iframe>
Sidan "iframe.html" innehåller alltså en klass vid namn "minklass" som du ändrar egenskaper för. Jag har inte provat, men dokumenten måste antagligen ligga på samma domän för att du skall ha rättighet att ändra egenskaperna.
Ja, precis, jag fick "Åtkomst nekad" när jag testade med en extern sida. Men jag skall testa hur det blir om jag gör der på en och samma domän.
Testade med:
<a href="#" onClick="getStyleClassByName('divinfo').className='blueborder';">Blå</a>
Men fick ett fel. Går det att göra samma sak på ett sätt som funkar?
Mmm... men det är inte klassen som du vill byta namn på, utan ett elements klasstillhörighet, så då blir det;
onClick="parent.document.getElementById('divinfo').className='blueborder';"
"blueborder" måste vara en definierad klass i det dokumentet.
men....getElementById, då måste väl elementet ha ett specifikt id?
I annat fall skulle det funka görbra med "getStyleClassByName('minklass').style.color='blue';" om man kunde ändra ramfärgen istället för typsnittsfärgen.
Visst. Använd borderColor istället för color :)
Jasså, det var inte svårare. :)
Tack, igen då.
Det blev så här:
<script type="text/javascript">
function getStyleClassByName(className){
if(document.all){
for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
for(var rule=0;rule<foo.document.styleSheets[styleSheet].rules.length;rule++){
if(foo.document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].rules[rule]; }
}
}
} else if(document.getElementById){
for(var styleSheet=0;styleSheet<foo.document.styleSheets.length;styleSheet++){
for(var rule=0;rule<foo.document.styleSheets[styleSheet].cssRules.length;rule++){
if(foo.document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return foo.document.styleSheets[styleSheet].cssRules[rule]; }
}
}
}
return null;
}
function red(className){
getStyleClassByName(className).style.borderColor='blue';
getStyleClassByName(className).style.borderStyle='dotted';
}
</script>
<iframe src="iframe.html" name="foo" width="400" height="200"></iframe>
<p>
<a href="#" onClick="red('divinfo');">Blå, med prickar</a>