Scribd
Carica
203 visualizzazioni

Js modifyCSS

Il documento contiene diversi metodi per modificare dinamicamente lo stile CSS di un documento tramite JavaScript. Vengono illustrate tecniche per aggiungere regole di stile, caricare file CSS esterni e rilevare il browser dell'utente.

Caricato da

ap_cool22
Copyright
© Attribution Non-Commercial (BY-NC)
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
203 visualizzazioni

Js modifyCSS

Il documento contiene diversi metodi per modificare dinamicamente lo stile CSS di un documento tramite JavaScript. Vengono illustrate tecniche per aggiungere regole di stile, caricare file CSS esterni e rilevare il browser dell'utente.

Caricato da

ap_cool22
Copyright
© Attribution Non-Commercial (BY-NC)
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 3

if (document.

createStyleSheet) { //IE ONLY


with (document.createStyleSheet()) { //create stylesheet
addRule("P","font-family: verdana; font-size: 10pt; color: red"); //add rule
}
}
else if (document.getElementsByTagName && document.createElement) { //NS6, OPERA
var head = document.getElementsByTagName("head")[0]; //locate <head>

//create <style>
var mystyle = document.createElement("style");
mystyle.type = "text/css";
mystyle = head.appendChild(mystyle);

//how do I add the rule??

}
-------------------

var myStyle = "<"+"style type=\"text\/css\""


myStyle += ">p {font-family:verdana} <
myStyle += "\/style>"

var head = document.getElementsByTagName("head")[0]


head.addAdjacentHTML("beforeEnd",myStyle)

------------------------
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}

-----------------------

Dynamically loading external JavaScript and CSS files

function loadjscssfile(filename, filetype){


if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file


loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a
JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

---------------------------------

var filesadded="" //list of files already added

function checkloadjscssfile(filename, filetype){


if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype)
filesadded+="["+filename+"]" //List of files added in the form
"[filename1],[filename2],etc"
}
else
alert("file already added!")
}

checkloadjscssfile("myscript.js", "js") //success


checkloadjscssfile("myscript.js", "js") //redundant file, so file not added

-----------------------------------

for modifying css through js

function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") &&
(version>=4))
{
alert("Your browser is good enough!");
if (document.createStyleSheet)
{ //IE ONLY
with (document.createStyleSheet())
{ //create stylesheet
addRule("#col-mid","height:340px; width:964px; margin:0px auto;
padding:0em; border:0px solid #000; padding:10px 0px 0px 0px;"); //add rule
}
}
}
else
{
alert("It's time to upgrade your browser!");
if (document.createStyleSheet)
{ //IE ONLY
with (document.createStyleSheet())
{ //create stylesheet
addRule("#col-mid","min-height:340px; width:964px; margin:0px
auto; padding:0em; border:0px solid #000; padding:10px 0px 0px 0px;"); //add rule
}
}
}
}
<body onload="detectBrowser()">

Potrebbero piacerti anche