Avatar billede mik789 Nybegynder
20. oktober 2007 - 12:28 Der er 13 kommentarer og
1 løsning

eksternt stylesheet uden for head sektionen eller noget lignende

Et javascript kan læggen i head sektionen eller i body sektionen hvor der er brug for det. Men med CSS er der kun mulighed for enten et link i head sektionen til eksternt css eller at skrive inline css i de enkelte html tags.

Jeg har nogle sider hvor jeg ikke har mulighed for at tilføje noget til head sektionen (der allerede har link til eksternt css), men alligevel godt vil undgå at skrive inline css. Jeg kan sagtens skrive flere eksterne css dokumenter, men jeg kan ikke linke til dem i head sektionen. Kan man på anden måde linke til dem uden for head sektionen?
Avatar billede olebole Juniormester
20. oktober 2007 - 12:32 #1
<ole>

Nej, et stylesheet _skal_ være loaded, inden indholdet bliver loaded

/mvh
</bole>
Avatar billede mik789 Nybegynder
20. oktober 2007 - 12:34 #2
og det kan ikke loades med et link i body sektionen?
Avatar billede jhe-ting Nybegynder
20. oktober 2007 - 13:38 #3
Jo da, men så ser man først siden uden.

<script type="text/javascript"><!--
function addStyleFrom(url){
  if (document.createStyleSheet){
    var myIEStyle = document.createStyleSheet(escape(url));
  } else {
    var newSS=document.createElement('link');
    newSS.rel='stylesheet';
    newSS.type='text/css';
    newSS.href=escape(url);
    document.getElementsByTagName("body")[0].appendChild(newSS);
  }
}
addStyleFrom("style.css");
//--></script>
Avatar billede olebole Juniormester
20. oktober 2007 - 14:10 #4
Nej da ... det skal vel være brugbart (= cross-browser)  ;o)

Der er voldsom forskel på, hvordan CSS/stylesheets fungerer i de forskellige browsere. Derudover _må_ et stylesheet ikke befinde sig i andet end head-elementet, så jhe-ting's eksempel er ikke validt.
Funktionen 'escape' er forøvrigt forlængst deprecated i JavaScript og afløst af 'encodeURI' og 'encodeURIComponent'
Avatar billede mik789 Nybegynder
20. oktober 2007 - 15:26 #5
ok, jeg må skrive mine styles inline så.
ole, læg et svar
Avatar billede jhe-ting Nybegynder
20. oktober 2007 - 21:36 #6
>> olebole
    Styles elementet indsættes dynamisk i HEAD-elementet af scriptet, hvilket ER det rigtige sted.
    'escape 'skiftes let ud med encodeURI

>> mik789
    - Men det er en 'lappeløsning', hvorimod den 'hårde' måde nok er det rigtige...
Avatar billede olebole Juniormester
20. oktober 2007 - 22:28 #7
jhe-ting >> Så har du da skrevet en masse overflødigt kode! Såvidt jeg kan se, bruger du 3/4 af scriptet til ulovligt at append'e et link-element til body-elementet  :)
Et inline stylesheet eller link-element må kun findes i head-elementet. De eneste styles, du kan sætte i body-elementet, er direkte i style-attributten på de enkelte elementer/tags.

Nej, hvis du udskifter escape med encodeURI sker der noget fuldstændig andet - og du får med garanti ikke loaded noget somhelst. F.eks. vil alle slashes blive ændret og gøre URL'en ubrugelig i dén sammenhæng  :)
Avatar billede roenving Novice
21. oktober 2007 - 05:40 #8
document.getElementsByTagName("head")[0].appendChild(newSS);
Avatar billede olebole Juniormester
21. oktober 2007 - 12:55 #9
roenving >> Det er en mulighed, men flere browsere har haft voldsomme besværligheder med stylesheets loaded efter markup-indlæsningen (og da de hører hjemme i head-elementet, er det måske ikke helt mærkeligt). Jeg ved dog ikke objektivt, om det stadig er tilfældet  :)
Avatar billede jhe-ting Nybegynder
27. oktober 2007 - 02:25 #10
Hatten af for roenving. Det er jo helt rigtigt.

Sjovt nok virker min ulovige kode (http://www.eksperten.dk/spm/801918#rid6905617) i FF trods fejlen, som jeg ikke opdagede.

Jeg har kun brugt den til debug af testudgaver. Når det så ser ordentligt ud overføres den nye CSS til et 'master'-style-sheet, og debug koden kan fjernes igen.. ;)
Avatar billede mik789 Nybegynder
27. oktober 2007 - 23:35 #11
er der nogle af jer der vil have point. I har alle tre bidraget konstruktivt
Avatar billede mik789 Nybegynder
28. oktober 2007 - 00:11 #12
testede roenvings forslag med dette simple farveskift:

<body>
<p>Her er noget tekst</p>
<script type="text/javascript">
var newSS = document.createElement("style");
newSS.innerHTML = ".blue{color:blue;}";
document.getElementsByTagName("head")[0].appendChild(newSS);
</script>
<p class="blue">Her er noget tekst</p>
</body>

Det virker i Firefox, men IE blokerer først scriptet som aktivt indhold, og selv hvis man tillader det, reagerer den ikke på den nye style.
Avatar billede olebole Juniormester
29. oktober 2007 - 14:57 #13
Blokkeringen skyldes sikkert, du tester lokalt. Det er der en SP2 udvidelse, der forhindrer.

Funktioner -> Avanceret -> Tillad ativst indhold i filer på Denne Computer (næsten nederst)
Avatar billede mik789 Nybegynder
31. oktober 2010 - 16:34 #14
ingen svarede trods opfordring. lukker sp.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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