Contrôle de CSS avec un bouton

Fermé
Eva - 13 juin 2013 à 21:03
Bonsoir,

je cherche à retirer/appliquer un style CSS avec un bouton, c'est à dire que lorsque je clic sur le bouton "annotation", tout le texte devient noir et de même taille et lorsque je re-clic, le style se remet.

Voici mon code :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Speak fast</title>
        <script type="text/javascript">
            var interID;
            var x = 0;
            var nbDiv = 10;
            var temps = 2500;
            window.onload = function()
            {
                
            }
            function surligne()
            {
                //if (x == nbDiv)x=0;
                for (i=0; i<nbDiv; i++)
                {
					document.getElementById("div"+(i+1)).style.backgroundColor = "white";
                }
                document.getElementById("div"+(x+1)).style.backgroundColor = '#7FFFD4';
                if (x==1)temps=3400;//like
                 if (x==2)temps=3400;//You Know
                 if (x==3)temps=1500;//Math
                 if (x==4)temps=2000;//I really
                 if (x==5)temps=3000;
                 if (x==6)temps=2500;//any
                if (x==7)temps=2800;
                if (x==8)temps=1800;//because
                if (x==9) temps=3000;
                clearInterval(interID);
                interID = setInterval(function()
                                      {  surligne();}, temps);
                x++;
            }
            function stop()
            { clearInterval(interID); }
			</script>
        
		<!-- lecteur audio -->
		<div id="divPlayer">
			<h1>Audio-Player</h1>
			
			<audio id="audioPlayer" src="atschool.wav" ontimeupdate="update(this)"></audio></br>
            
			<div>
				<div id="progressBarControl">
					<div id="progressBar" onclick="clickProgress('audioPlayer', this, event)">Pas de lecture</div>
				</div>
				<span id="progressTime">00:00</span>
			</div>
            
			<button class="control" onclick="play('audioPlayer', this)">Play</button>
			<button class="control" onclick="resume('audioPlayer')">Stop</button>
			<button class="control" onclick="annotation('audioPlayer', this)">Annotation</button></br></br>
			
			<span class="volume">
				<a class="stick1" onclick="volume('audioPlayer', 0)"></a>
				<a class="stick2" onclick="volume('audioPlayer', 0.3)"></a>
				<a class="stick3" onclick="volume('audioPlayer', 0.5)"></a>
				<a class="stick4" onclick="volume('audioPlayer', 0.7)"></a>
				<a class="stick5" onclick="volume('audioPlayer', 1)"></a>
			</span>
        </div></br>
		
        <script type="text/javascript">

			/*function annotation(idPlayer, control) {
				var player = document.querySelector('#' + idPlayer);
				
				if (player.annotation) {
					player.annotation();
					control.textContent = 'Annotation';
					document.getElementByClassName("syllabe").style.color= "black";
					document.getElementByClassName("syllabe").style.fontSize= 18px;
					document.getElementByClassName("syllabehaute").style.color= "black";
					document.getElementByClassName("syllabehaute").style.fontSize= 18px;
					document.getElementByClassName("syllabebasse").style.color = "black";
					document.getElementByClassName("syllabebasse").style.fontSize = 18px;
				} else {
					control.textContent = 'Annoter';
					document.getElementByClassName("syllabe").style.color= "red";
					document.getElementByClassName("syllabe").style.fontSize= 16px;
					document.getElementByClassName("syllabehaute").style.color= "blue";
					document.getElementByClassName("syllabehaute").style.fontSize= 20px;
					document.getElementByClassName("syllabebasse").style.color = '#FFA500';
					document.getElementByClassName("syllabebasse").style.fontSize = 10px;
				}
			}*/
					
			function play(idPlayer, control) {
                var player = document.querySelector('#' + idPlayer);
                
                if (player.paused) {
                    player.play();
                    interID = setInterval(function()
                                          { surligne();}, temps);
                    control.textContent = 'Pause';
                } else {
                    player.pause();
                    clearInterval(interID);
                    control.textContent = 'Play';
                }
            }
            
            function resume(idPlayer) {
                var player = document.querySelector('#' + idPlayer);
                 clearInterval(interID);
                for (i=0; i<nbDiv; i++)
                {
					document.getElementById("div"+(i+1)).style.backgroundColor = "white";
                }
                player.currentTime = 0;
                player.pause();
                
                x = 0;
            }
            
            function volume(idPlayer, vol) {
                var player = document.querySelector('#' + idPlayer);
                
                player.volume = vol;
            }
            
            function update(player) {
                var duration = player.duration;    // Durée totale
                var time     = player.currentTime; // Temps écoulé
                var fraction = time / duration;
                var percent  = Math.ceil(fraction * 100);
                
                var progress = document.querySelector('#progressBar');
                
                progress.style.width = percent + '%';
                progress.textContent = percent + '%';
                
                document.querySelector('#progressTime').textContent = formatTime(time);
            }
            
            function formatTime(time) {
                var hours = Math.floor(time / 3600);
                var mins  = Math.floor((time % 3600) / 60);
                var secs  = Math.floor(time % 60);
                
                if (secs < 10) {
                    secs = "0" + secs;
                }
                
                if (hours) {
                    if (mins < 10) {
                        mins = "0" + mins;
                    }
                    
                    return hours + ":" + mins + ":" + secs; // hh:mm:ss
                } else {
                    return mins + ":" + secs; // mm:ss
                }
            }
            
            function clickProgress(idPlayer, control, event) {
                var parent = getPosition(control);    // La position absolue de la progressBar
                var target = getMousePosition(event); // L'endroit du la progressBar où on a cliqué
                var player = document.querySelector('#' + idPlayer);
                
                var x = target.x - parent.x;
                var y = target.y - parent.y;
                
                var wrapperWidth = document.querySelector('#progressBarControl').offsetWidth;
                
                var percent  = Math.ceil((x / wrapperWidth) * 100);
                var duration = player.duration;
                
                player.currentTime = (duration * percent) / 100;
            }
            
            function getMousePosition(event) {
                if (event.pageX) {
                    return {
                        x: event.pageX,
                        y: event.pageY
                    };
                } else {
                    return {
                        x: event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
                        y: event.clientY + document.body.scrollTop  + document.documentElement.scrollTop
                    };
                }
            }
            
            function getPosition(element){
                var top = 0, left = 0;
                
                while (element) {
                    left   += element.offsetLeft;
                    top    += element.offsetTop;
                    element = element.offsetParent;
                }
                
                return { x: left, y: top };
            }
			</script>
        <style>
            /* syllabes */
            .syllabe
            {
                color: red;
                font-size: 16px;
            }
            
            .syllabehaute
            {
                color: blue;
                font-size: 20px;
            }
            
            .syllabebasse
            {
                color: #FFA500;
                font-size: 10px;
            }
            
            
            /* lecteur audio */
            #divPlayer
            {
                width: 300px;
                height: 120px;
                margin-left: auto;
                margin-right: auto;
                border: 1px double #aaa;
                border-radius: 2px;
                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                padding: 20px;
                margin-top: 50px;
            }
            
            /*Titre*/
            h1
            {
                font-size: 17px;
                line-height: 30px;
                margin: 0;
                padding: 0;
                margin-bottom: 25px;
                border-bottom: #000 1px solid;
            }
            
            /*Bouton*/
            button, input[type='button'], input[type='submit']
            {
                border-radius: 2px;
                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
                background: -moz-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
                border: 1px solid #aaa;
                color: #444;
                margin-bottom: 0px;
                min-width: 4em;
                padding: 3px 12px 3px 12px;
                font-size: 12px;
                cursor: pointer;
                display: inline-block;
            }
            
            button:hover, input[type='button']:hover, input[type='submit']:hover
            {
                -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
                background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
                background: #ebebeb -moz-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
                border-color: #999;
                color: #222;
                display: inline-block;
            }
            
            .control
            {
                width: 78px;
            }
            
            /*barre de progression*/
            #progressBarControl
            {
                width: 210px;
                height: 15px;
                border: 1px solid #aaa;
                border-radius: 2px;
                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                margin-bottom: 5px;
                display: inline-block;
            }
            
            #progressBar
            {
                width: 0px;
                background: #ebebeb;
                height: 15px;
                text-align: right;
                line-height: 15px;
                font-size: 9px;
                white-space: nowrap;
                cursor: pointer;
            }
            
            #progressTime
            {
                font-size: 10px;
                color: #666;
            }
            
            /*volume*/
            .volume
            {
                vertical-align: bottom;
                display: inline-block;
                height: 20px;
                white-space: nowrap;
                position: relative;
                width: 40px;
				margin-left : 100px;
				margin-bottom : 0px;
            }
            
            .volume a 
            {
                display: inline-block;
                background: #ebebeb;
                width: 8px;
                vertical-align: bottom;
                margin-left: 165px;
                margin-right: 0px;
                margin-bottom: 70px;
                cursor: pointer;
                border-left: 1px solid #fff;
                position: absolute;
                bottom: 0;
                
            }
            
            .stick1 
            { 
                height: 5px;  
                left: 0px;
            }
            .stick2 
            { 
                height: 10px; 
                left: 9px;
            }
            .stick3 
            { 
                height: 15px; 
                left: 18px; 
            }
            .stick4 
            { 
                height: 20px; 
                left: 27px; 
            }
            .stick5 
            { 
                height: 25px; 
                left: 36px; 
            }
            
            /*Texte*/
            #divText
            {
                width: 300px;
                margin-left: auto;
                margin-right: auto;
                border: 1px double #aaa;
                border-radius: 5px;
                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                padding: 20px;
                margin-top: -20px;
            }
            
			</style>
	</head>
	
	
	<body>
		<div id="divText">
            
            <span class=text id="div1">
                <span class="none">At</span> <span class="none">s</span><span class="none">ch</span><span class="syllabehaute">oo</span><span class="syllabehaute">l</span><span class="syllabehaute"></span> <span class="none">i</span> <span class="none">h</span><span class="syllabehaute">a</span><span class="syllabehaute">t</span><span class="normal">e</span><span class="normal">d</span>  <span class="syllabehaute">sci</span><span class="syllabebasse">e</span><span class="normal">n</span><span class="normal">c</span><span class="normal">e</span><span class="normal">s</span><span class="normal"></span> <span class="syllabehaute">sub</span><span class="none">ject</span><br>
            </span>
            
            <span class=text id="div2">
                <span class="none">like</span> <span class="none">ph</span><span class="syllabehaute">y</span><span class="syllabehaute">s</span><span class="normal">i</span><span class="normal">cs</span><span class="normal">
                    <span class="none">ch</span><span class="syllabehaute">e</span><span class="syllabehaute">m</span><span class="normal">i</span><span class="normal">s</span><span class="normal">t</span><span class="normal">r</span><span class="normal">y</span>
                </span> <span class="none">and</span>  <span class="none">bi</span><span class="syllabehaute">ol</span><span class="syllabebasse">o</span><span class="none">gy.</span><br>
            </span>
            <span class=text id="div3">
                <span class="none">You</span> <span class="none">know,</span> <span class="none">and</span> <span class="none">.....</span> <span class="normal">I</span> <span class="normal">wasn't</span>  <span class="normal">
                    <span class="none">very</span> <span class="none">good</span>
                </span>
                <span class=text id="div4">
                    <span class="syllabe">m</span><span class=" syllabe ">a</span><span class="syllabe">th</span><span class="syllabebasse">e</span><span class=" syllabehaute ">m</span><span class="syllabehaute">a</span><span class="syllabehaute">t</span><span class="normal">i</span><span class="normal">cs</span><span class="normal"></span> <span class="none">and</span> <span class="none">th</span><span class="syllabehaute">i</span><span class="syllabehaute">ng</span><span class="syllabehaute">s</span><span class="syllabehaute"></span>.
                    <br>
                </span>
                <span class=text id="div5">
                    <span class="none">I</span> <span class=" syllabehaute ">r</span><span class="syllabehaute">ea</span><span class="normal">ll</span><span class="normal">y</span>  <span class="none">liked</span> <span class="syllabehaute">sub</span><span class="none">ject</span> <span class="none">like</span>
                    <br>
                </span>
                
                <span class=text id="div6">
                    <span class=" syllabehaute ">h</span><span class=" syllabehaute ">i</span><span class="syllabehaute">s</span><span class="normal">t</span><span class="syllabefaible">o</span><span class="normal">ry</span>,
                    <span class="none">g</span><span class="normal">e</span><span class="syllabehaute">o</span><span class="syllabehaute">g</span><span class="NORMAL">r</span><span class="syllabebasse">a</span><span class="normal">ph</span><span class="normal">y</span><span class="normal"></span>,  <span class="syllabe">e</span><span class="syllabe">c</span><span class="syllabebasse">o</span><span class="normal">n</span><span class="syllabehaute">o</span><span class="syllabehaute">m</span><span class="normal">i</span><span class="normal">cs.</span><br>
                </span>
                
                <span class=text id="div7">
                <span class="syllabehaute">A</span><span class="syllabehaute">n</span><span class="normal">y</span><span class="normal">w</span><span class="syllabe">ay</span><span class="syllabe"></span> <span class="none">when</span> <span class="none">i</span> <span class="none">went</span> <span class="none">to</span>  <span class="none">u</span><span class="none">ni</span><span class=" syllabehaute ">v</span><span class=" syllabehaute ">er</span><span class=" normal ">si</span><span class=" nomal ">ty</span><br>
            </span>
            
                <span class=text id="div8">
                    <span class="none">I</span>  <span class="none">w</span><span class="syllabehaute">a</span><span class="syllabehaute">n</span><span class="syllabehaute">t</span><span class="normal">e</span><span class="normal">d</span> <span class="none">to</span> <span class="none">do</span> <span class="none">g</span><span class="normal">e</span><span class="syllabehaute">o</span><span class="syllabehaute">l</span><span class="syllabebasse">o</span><span class="normal">g</span><span class="normal">y</span><span class="normal"></span> <span class="none">but</span>  <span class="none">I</span> <span class="none">c</span><span class="syllabehaute">ou</span><span class="syllabehaute">l</span><span class="syllabehaute">d</span><span class="normal">n</span><span class="normal">'t</span><span class="normal"></span><br>
                </span>
                
                <span class=text id="div9">
                     <span class="none">b</span><span class="normal">e</span><span class="normal">c</span><span class="syllabehaute">au</span><span class="syllabehaute">s</span><span class="syllabehaute">e</span> <span class="none">I</span> <span class="none">was</span> <span class="none">no</span> <span class="none">good</span> <span class="none">at</span> <span class="syllabehaute">sci</span><span class="syllabebasse">e</span><span class="normal">n</span><span class="normal">c</span><span class="normal">e</span><span class="normal">s</span><span class="normal"></span>.<br>
                </span>
                <span class=text id="div10">
                    <span class="none">So</span> <span class="none">in</span> <span class="none">the</span> <span class="none">end</span> <span class="none">I</span> <span class="none">did</span> <span class="none">ph</span><span class="normal">il</span><span class="syllabehaute">o</span><span class="syllabehaute">s</span><span class="syllabebasse">o</span><span class="normal">ph</span><span class="normal">y</span><span class="normal"></span>.
                </span>





		</div>
	</body>
    
</html>