CSS mit Javascript ändern

svenmann · 11. Jan. 2012

Hallo Zusammen,

ich möchte meine, noch im Aufbau befindende Homepage, etwas dynamischer gestalten und wollte dazu dem Besucher die Gelegenheit geben, via Drop Down Menü einen anderen Style zu wählen.

Das sieht folgender maßen aus:

HTML:

    <div id="#">
           <dl class="dropdown">
              <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Skinz Svenmann.de</dt>
                 <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
                    <ul>
                       <li><a href="#" onclick="setCSS('layout style black.css', 'layout style black.css');">Schwarz</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                   </ul>
                </dd>
           </dl> 
    </div>

Leider funktioniert diese Variante nicht und ich weis mir im Moment auch nicht weiter zu helfen, da ich auch noch nicht so lange mit JavaScript arbeite.

Kann mir vielleicht jemand weiterhelfen?
Danke schon mal im voraus!!

Gruß Svenmann

kkapsner · 12. Jan. 2012

1. Wie sieht das JS aus?
2. Was steht in der Fehlerkonsole?
3. <a href="#" onclick="..."> - invalide und unnötig => onclick direkt im <li> registrieren (am besten auch nicht im HTML, sondern im JS).
4. Die ID für das <div> ist nicht valide.

svenmann · 12. Jan. 2012

1. Der JavaScript Code

Code:

// Browserweiche
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;

function setCSS(strID, strClass){
  // Objekt holen
  var myObj = (IE)?document.all[strID]:document.getElementById(strID);

  // CSS-Klasse ändern
  myObj.className = strClass;
}

2. In der fehlerkonsole Steht:

Warnung: Fehler beim Verarbeiten des Werts für 'filter'. Deklaration ignoriert.

3. Wie müsste das dann aussehn wenn ich die "onclick' Funktion in das JS setzte?

4. Die ID für das <div> ist noch nicht fertig, bei mir im Code steht da noch nichts.

Gruß Svenmann

miniA4kuser · 12. Jan. 2012

@svenmann:

1. Wenn du Code postest, dann bitte auch jenen den du verwendest.
Zudem kann der gezeigte JavaScript-Code nicht funktionieren.
Für was die Browserweiche?
document.getElementById() kennt mittlerweile so ziemlich jeder Browser der in Benutzung ist.

2. Bei dem was du uns an Codezeilen geliefert hast, kann das nicht in der Fehlerkonsole stehen.

ein schlauer · 12. Jan. 2012

svenmann schrieb:
1. Der JavaScript Code

Code:

// Browserweiche IE = document.all&&!window.opera;

Auch wenn solche "Browserweichen" seit Urzeiten verpöhnt sind und noch nie wirklich sinnvoll waren, trotzdem für's Archiv eine die wenigstens immer funktioniert:

Code:

var IE = /*@cc_on!@*/false;

miniA4kuser · 12. Jan. 2012

Ich hatte mal mit folgendem experimentiert:

Code:

IE='\v'=='v'

bzw. die Kurzform davon:

Code:

IE=!+'\v1';

svenmann · 12. Jan. 2012

So, da ich jetzt gar nicht mehr durchblicke poste ich einfach mol das was ich habe...

Mein HTML Grundgerüst:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="../script/css/layout style default.css" />



<script type="text/javascript" src="../script/javascript/javascripts.js"></script>
<script type="text/javascript" src="../script/javascript/dropdown.js"></script>
<script type="text/javascript" src="../script/javascript/registerkarte.js"></script>
<script type="text/javascript" src="../script/javascript/style-switcher.js"></script>

</head>

<body bgcolor="#000">
<center>
  <div id="root_under_back">
  <div id="root_back" style="background-attachment:fixed">
  <div id="root">
    <div id="top_logo" align="center"></div>
    <div id="horizontalmenu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
         <li class="current"><a href="#">Home</a></li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">Über Mich</a></li>
         <li><a href="#">Kontakt</a></li>
         <li><a href="#">Media</a></li>
         <li><a href="#">Bilder</a></li>
         <li><a href="#">Gästebuch</a></li>
         <li><a href="#">Impressum</a></li>
      </ul>
    </div>
           <dl class="dropdown">
              <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Skins</dt>
                 <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
                    <ul id="layout style default.css">
                       <li onclick="setCSS('layout style default.css', 'root' 'top_logo');"><a href="#">Weiß</a></li>
                       <li onclick="setCSS('layout style black.css', 'root' 'top_logo');"><a href="#">Schwarz</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                       <li><a href="#">...</a></li>
                   </ul>
                </dd>
           </dl> 
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Registerkarte 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Registerkarte 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Inhalt 1</div>
        <div class="TabbedPanelsContent">Inhalt 2</div>
      </div>
    </div>
  </div>
  </div>
  </div>
  </div>
</center>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Der komplette CSS Code:

Code:

@charset "utf-8";
/* CSS Document */

/* Anfang Grundgerüst */

#root_under_back

   {
	   height:100%; 
	   width:1600px;
	   margin-top: 0px;
	   margin: 0px;
	   padding-top:0px;
	   background-color:#fff;
	   background-image:url(../../images/Backgrounds/background_fadeout.png);
	   background-repeat:repeat-y;
   }

#root_back

   {
	   height:100%; 
	   width:1300px;
	   margin: 0px;
	   margin: 0px;
       padding:30;
	   background-color:;
	   background-image:url(../../images/Backgrounds/Svenmann_Banner_background.gif);
	   background-position:top;
	   background-repeat:no-repeat;
   }

#root
   
   {
	   height:100%; 
	   width:1000px;
	   margin: 0px;
	   margin: 0px;
       padding: 0;
 	   background-attachment:fixed;
	   background-color:#FFF;
	   background-image:url(../../images/Top-Logo/Svenmann_Banner.gif);
	   background-position:top;
	   background-repeat:no-repeat;
   }

#top_logo
	{   
		background:#fff;
		background-image:url(../../images/Top-Logo/Svenmann_Banner.gif);
		background-position:center;
		width:1000px;
		height:550px;
	}

/* Ende Grundgerüst */

/* Anfang Menu-Leiste*/

#horizontalmenu
   {
	   width:1000px;
	   height:33px;
	   float:left;
   }

/* Ende Menu-Leiste*/

/* Anfang Mittelteil */
	
#content_main
    {
		background-color:#fff;
		font-size:16px;
		width:1000px;
		height:1100px;
		margin:0px;
		color:#666;
	}

.content_left
    {
        width: 530px;
    	height:700px auto;
    	margin-left:10px;
     	margin-top:10px;
        float: left;
        padding: 5px;
    	background-color:#fff;
		padding: 10px 10px 15px 10px;
		border-color:#000000;
		border-style:inset;
		border-width:thin;
						
    }
	
.content_middle
    {
        width: 150px;
    	height:500px;
    	margin-left:100px;
     	margin-top:10px;
        float: left;
        padding: 5px;
    	background-color:#fff;
		border:#000, double;
    }
	
.content_right
    {
        width: 250px;
    	height:700px auto;
    	margin-left:60px;
     	margin-top:10px;
        float: left;
        padding: 5px;
    	background-color:#fff;
		padding: 10px 10px 15px 10px;
		border-color:#000000;
		border-style:inset;
		border-width:thin;
    }
	
.content_left_legende
    {
		font-size:12px;
		font-style:normal;
		color:#000000;
		text-decoration:underline;
	}
		
	
/* Ende Mittelteil */

/* Anfang Link Color */

.link A:link 
  
   {
	   text-decoration: none;
	   color:#000
   }
   
.link A:visited 
  
   {
	   text-decoration: none;
	   color:#000;
   }
   
.link A:active 
   
   {
	   text-decoration: none;
	   color:#000;
   }
   
.link A:hover 

   {
	   text-decoration: none;
	   color:#000;
   }
   
   
.legende A:link 
 
   {
	   text-decoration: none;
	   color:#000
   }
   
.legende A:visited 
  
   {
	   text-decoration: none;
	   color:#000;
   }
   
legende A:active 

   {
	   text-decoration: none;
	   color:#000;
   }
   
.legende A:hover 

   {
	   text-decoration: none;
	   color:#000;
   }

/* Ende Link Color */

/* Anfang Border Images */
	
.border_set
    {
		padding: 10px 10px 15px 10px;
	}
	
div.box {background:url(../../images/border-images/box_ww.gif) repeat-y;} 												/* Left */
div.box div {background:url(../../images/border-images/box_ee.gif) right repeat-y;} 									/* Right */
div.box div div {background:url(../../images/border-images/box_nn.gif) repeat-x;} 										/* Top */
div.box div div div {background:url(../../images/border-images/box_ss.gif) bottom repeat-x;} 							/* Bottom */
div.box div div div div {background:url(../../images/border-images/box_nw.gif) left top no-repeat;} 					/* Left Top */
div.box div div div div div {background:url(../../images/border-images/box_ne.gif) right top no-repeat;} 				/* Right Top */
div.box div div div div div div {background:url(../../images/border-images/box_sw.gif) left bottom no-repeat;} 			/* Left Bottom */
div.box div div div div div div div {background:url(../../images/border-images/box_se.gif) right bottom no-repeat;} 	/* Right Bottom */

.inhalt 
    {
		padding: 10px 10px 15px 10px;
	}	
	
/* Ende Border Images */

/* Anfang Horizontal Menu */

ul.MenuBarHorizontal

   {
	   margin: 0;
	   padding: 0;
	   list-style-type: none;
	   font-size: 12px;
	   cursor: default;
	   width: auto;
   }

ul.MenuBarActive

   {
	   z-index: 1000;
   }

ul.MenuBarHorizontal li

   {
	   margin: 0;
	   padding: 0;
	   list-style-type: none;
	   font-size: 12px;
	   position: relative;
	   text-align:center;
	   cursor: pointer;
	   width: 125px;
	   height:30px;
	   float: left;
   }

ul.MenuBarHorizontal ul
 
   {
	   margin: 0;
	   padding: 0;
	   list-style-type: none;
	   font-size: 12px;
	   z-index: 1020;
	   cursor: default;
	   width: 8.2em;
	   position: absolute;
	   left: -1000em;
   }

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

   {
	   left: auto;
   }

ul.MenuBarHorizontal ul li

   {
	   width: 8.2em;
   }

ul.MenuBarHorizontal ul ul

   {
	   position: absolute;
	   margin: -5% 0 0 95%;
   }

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

   {
	   left: auto;
	   top: 0;
   }

ul.MenuBarHorizontal ul
 
   {
	   border: 1px solid #CCC;
   }

ul.MenuBarHorizontal a

   {
	   display: block;
	   cursor: pointer;
	   background-color: #fff;
	   padding: 0.5em 0.75em;
	   color: #A79787;
	   text-decoration: none;
   }

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #fff;
	color: #000;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
   {
	   background-color: #fff;
	   color: #000;
   }
   
ul.MenuBarHorizontal li a:hover,.current 

   {
       color:#333;
       background: repeat-x top left;
   }

ul.MenuBarHorizontal .current a 

   {
       color:#333;
       font-weight:700;
   }
   
ul.MenuBarHorizontal dl #space
   
   {
	   margin: 0;
	   padding: 0;
	   list-style-type: none;
	   font-size: 12px;
	   position: relative;
	   text-align:center;
	   cursor: pointer;
	   width: 20px;
	   height:30px;
	   float: left;
   }   

ul.MenuBarHorizontal iframe

   {
	   position: absolute;
	   z-index: 1010;
	   filter:alpha(opacity:0.1);
   }

@media screen, projection

{
	ul.MenuBarHorizontal li.MenuBarItemIE
	   
	   {
		   display: inline;
		   f\loat: left;
		   background: #FFF;
	   }
}


/* Ende Horizontal Menu */	

/* Anfang Dropdown Menu */

body 
   
   {
	   margin:0px; 
	   font:12px Verdana, Arial, Helvetica;
   }
   
* 
   
   {
	   padding:0; margin:0;
   }

.dropdown 
   
   {
	   float:right;
	   padding-right:0px;
	   margin-right:0px;
   }

.dropdown dt 
   
   {
	   width:234px; 
	   padding:8px;
	   font-weight:bold;
	   color:#A79787; 
	   cursor:pointer; 
	   background:;
	   background:#fff
   }

.dropdown dt:hover 
   
   {
	   background:#fff;
   }

.dropdown dd 

   {
	   position:absolute; 
	   overflow:hidden; 
	   width:250px; 
	   display:none; 
	   background:#fff; 
	   z-index:200; 
	   opacity:0;
   }

.dropdown ul 

   {
	   width:250px;
	   list-style:none; 
	   border-top:none;
   }

.dropdown li 

   {
	   display:inline;
   }

.dropdown a, .dropdown a:active, .dropdown a:visited 

   {
	   display:block; 
	   padding:5px; 
	   color:#333; 
	   text-decoration:none; 
	   background:#fff;
	   width:250px;
   }

.dropdown a:hover 

   {
	   background:#fff; 
	   color:#A79787;
   }

.dropdown .underline 

   {
	   border-bottom:1px solid #fff;
   }

/* Ende Dropdown Menu */

/* Anfang Registerkarte */

.TabbedPanels 

   {
	   overflow: hidden;
	   margin: 0px;
	   padding: 0px;
	   clear: none;
 	   width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
   }

.TabbedPanelsTabGroup 

   {
	   margin: 0px;
	   padding: 0px;
   }

.TabbedPanelsTab 
   
   {
	   position: relative;
	   top: 1px;
	   float: left;
	   padding: 4px 10px;
	   margin: 0px 1px 0px 0px;
	   font: bold 0.7em sans-serif;
	   background-color: #DDD;
	   list-style: none;
	   border-left: solid 1px #CCC;
	   border-bottom: solid 1px #999;
	   border-top: solid 1px #999;
	   border-right: solid 1px #999;
	   -moz-user-select: none;
	   -khtml-user-select: none;
	   cursor: pointer;
	   font-size:15px;
   }

.TabbedPanelsTabHover 
   
   {
	   background-color: #CCC;
   }

.TabbedPanelsTabSelected 
   
   {
	   background-color: #EEE;
 	   border-bottom: 1px solid #EEE;
   }

.TabbedPanelsTab a 
 
   {
	   color: black;
	   text-decoration: none;
   }

.TabbedPanelsContentGroup 

   {
	   clear: both;
	   border-left: solid 1px #CCC;
	   border-bottom: solid 1px #CCC;
	   border-top: solid 1px #999;
	   border-right: solid 1px #999;
	   background-color: #EEE;
   }

.TabbedPanelsContent 

   {
	   overflow: hidden;
	   padding: 4px;
	   width:700px;
   }

.TabbedPanelsContentVisible 

   {
   }

.VTabbedPanels 

   {
	   overflow: hidden;
	   zoom: 1;
   }

.VTabbedPanels .TabbedPanelsTabGroup 

   {
	   float: left;
	   width: 10em;
	   height: 20em;
	   background-color: #EEE;
	   position: relative;
	   border-top: solid 1px #999;
	   border-right: solid 1px #999;
	   border-left: solid 1px #CCC;
	   border-bottom: solid 1px #CCC;
   }

.VTabbedPanels .TabbedPanelsTab 

   {
	   float: none;
	   margin: 0px;
	   border-top: none;
	   border-left: none;
	   border-right: none;
   }

.VTabbedPanels .TabbedPanelsTabSelected 

   {
	   background-color: #EEE;
	   border-bottom: solid 1px #999;
   }

.VTabbedPanels .TabbedPanelsContentGroup 

   {
	   clear: none;
	   float: left;
	   padding: 0px;
	   width: 30em;
	   height: 20em;
   }

/* Styles for Printing */
@media print 

{
	
.TabbedPanels 

   {
	   overflow: visible !important;
   }
   
.TabbedPanelsContentGroup 

   {
	   display: block !important;
	   overflow: visible !important;
	   height: auto !important;
   }
   
.TabbedPanelsContent 

   {
	   overflow: visible !important;
	   display: block !important;
	   clear:both !important;
   }
   
.TabbedPanelsTab 

   {   
	   overflow: visible !important;
	   display: block !important;
	   clear:both !important;
   }
}

/* Ende Registerkarte */

Und das JavaScript für den Style Switcher:

Code:

// JavaScript Document

// Browserweiche
IE=!+'\v1';

function setCSS(strID, strClass){
  // Objekt holen
  var myObj = (IE)?document.all[strID]:document.getElementById(strID);

  // CSS-Klasse ändern
  myObj.className = strClass;
}

Es sind vielleicht ein paar Dinge umständlich oder nicht perfekt aber es funktioniert alles, bis auf den Style-Switcher.

Die Idee für den Switcher habe ich übrigens von der Metallica Homepage.
metallica.com

ich habe mich verzweifelt versucht reinzuarbeiten.....
Ich wäre echt glücklich wenn mir jemand helfen könnte.

Danke

Gruß Svenmann

kkapsner · 12. Jan. 2012

Du benutzt die Funktion setCSS falsch und dewegen sollte nach dem Klick noch etwas anderes in der Konsole stehen.

Zu 3.: Du holst dir das gewünschte Element mit document.getElementById o.Ä. und fügst dann den gewünschten Eventlistener mit NODE.addEventListener bzw. NODE.attachEvent an. Aber wo sie ich das sehe solltest du erst einmal die Grundlagen von JS lernen.

PS: So wie ich das sehe, ist der Styleswitcher auf der Metallica-Seite fast komplett serverseitig gemacht...

ein schlauer · 13. Jan. 2012

miniA4kuser schrieb:
Ich hatte mal mit folgendem experimentiert:

Code:

IE='\v'=='v'

bzw. die Kurzform davon:

Code:

IE=!+'\v1';

Gibt es dafür eine Eklärung? Ist das ein Bug oder ein definiertes Verhalten?

miniA4kuser · 13. Jan. 2012

ein schlauer schrieb:
Gibt es dafür eine Eklärung? Ist das ein Bug oder ein definiertes Verhalten?

Das hatte ich mal irgendwo aufgeschnappt und darauf hin etwas mit herumexperimentiert.

Code:

var browserinfo = '',
	IE = '\v'=='v';
if (IE) {
	browserinfo = 'INTERNET EXPLORER<br /><br />';
}
browserinfo += 'Browser => ' + BrowserDetect.browser + ' Version ' + BrowserDetect.version + ' running on ' + BrowserDetect.OS;
document.write(browserinfo);

Erfolgreich getestet mit IE5.55, IE6, IE7, IE8, Firefox, Chrome, Opera - siehe IE check

IE9 kann ich nicht testen mangels Windows 7

jspit · 13. Jan. 2012

Zur Erklärung: Der IE interpretiert "\v" nicht als vertical tab. Dazu brauch man nur mal "\v".charCodeAt(0) ausgeben. Der IE liefert 118, der FF z.B. 11.
Von der Benutzung um etwas Tipparbeit zu sparen kann ich nur abraten, denn irgendwann wird vill. auch der IE den vertical tab interpretieren.

ein schlauer · 13. Jan. 2012

Zumal in dem vorliegenden Fall gar keine Browserprüfung notwendig ist, sondern eine Prüfung auf die Funktion völlig ausreichend ist, bzw. diese hier sogar komplett entfallen kann. Wenn man beim surfen Skripte im IE 4 zulassen würde, würde der bei jeder zweiten Seite abstürzen. Da das gleiche auch für CSS Code gilt, ist das surfen mit so einem Ding nicht mehr möglich.

CSS mit Javascript ändern

svenmann

Guest

kkapsner

Super Moderator

svenmann

Guest

miniA4kuser

Lounge-Member

ein schlauer

Lounge-Member

miniA4kuser

Lounge-Member

svenmann

Guest

kkapsner

Super Moderator

ein schlauer

Lounge-Member

miniA4kuser

Lounge-Member

jspit

Lounge-Member

ein schlauer

Lounge-Member