manipulieren von css element per js


rernanded

Erfahrenes Mitglied
#1
Hi ich suche eine Idee wie ich per js ein css element manipulieren kann.


Den folgenden Code habe ich, nur funktioniert der nicht. Geändert werden soll die prozentuale Angabe zu padding-top von class kopf-mitte2

im css ist
padding-top: 0%;

HTML:
<div id="changer">

<input type="range" name="variable" min="0" max="100" value="0" oninput="document.getElementByClassName('kopf-mitte2').style.paddingTop = this.value+'%';">

</div>





MONI
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
#2
Kann leider kein kopf-mitte2 sehen,deswegen habe ich mal id test genommen
Meinst du das so ?
Code:
<div id="test">test</div>
<input type="range" name="variable" min="0" max="100" value="0" id="range">
<script>
  document.getElementById('range').addEventListener('change',function(){
  document.getElementById('test').style.paddingTop=this.value+'px';
  });
</script>
 

rernanded

Erfahrenes Mitglied
#3
Hi basti1012
klappt leider nicht.
Hier der Code mit Deiner angepasst/geändert eingebauten Idee.

Ich glaube der event handler change ist nicht passend. Vllt. doch mit input oder oninput?

MONI


HTML:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <link href="style.css" rel="stylesheet">

<script>
  document.getElementById('range').addEventListener('change',function(){
  document.getElementByClassName('kopf-mitte2').style.paddingTop=this.value+'%';
  });
</script>



<style>
#changer{
position: absolute;
top: 0%;
left: 0%;
z-index: 10;
background-color: #FFF;
}
</style>

</head>
<body>

<div id="changer">

<input type="range" name="variable" min="0" max="100" value="0" id="range">

</div>



<div class="container">
    <div class="row"><!--########## kopf ##########-->
        <div class="column-1">
            <div class="kopf-mitte1">
            <div class="kopf-mitte2">
            <div class="kopf-mitte3">
            <h2>
                Heading
            </h2>
            <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
            </div>
            </div>
            </div> 
        </div>
   </div>
</div>

...
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
#4
Jo, so geht es auch nicht.
Du hast 3 Fehler gemacht.
1. Es heist document.getElements , du hast da ein S vergessen

2. Wenn du Elemente mit TagName oder ClassName ansprechen willst mußt du noch [0] da hinter schreiben.
Die Zahl sagt an welche stelle dein Element ist wenn es das öffters gibt. Deswegen würde ich in sollchen fällen gleich ID nehmen und nicht Classname.


3. Das Script ist an Anfang der Seite.
Da versucht das Script ein Element zu rufen was beim erstellen der Seite noch nicht da wahr. Besser ist das Script nach unten zu setzen oder auf onload ,bzw DOMContentLoaded zu nutzen.


Alle Fehler beseitigt sollte es so gehen
Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#changer{
position: absolute;
top: 0%;
left: 0%;
z-index: 10;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="changer">
<input type="range" name="variable" min="0" max="100" value="0" id="range">
</div>

<div class="container">
    <div class="row">
        <div class="column-1">
            <div class="kopf-mitte1">
            <div class="kopf-mitte2">
            <div class="kopf-mitte3">
            <h2>
                Heading
            </h2>
            <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
            </div>
            </div>
            </div>
        </div>
   </div>
</div>
  <script>
  document.getElementById('range').addEventListener('change',function(){
  document.getElementsByClassName('kopf-mitte2')[0].style.paddingTop=this.value+'%';
  });
</script>
</body>
</html>
Warum du da so viele divs hast und warum du kopf-mitte2 verschieben tust verstehe ich nicht, aber das ist gerade ja nicht das Thema
 
Zuletzt bearbeitet: