Hoe CSS-onroerend goed te wijzigen met Javascript

Ik wil CSS-eigenschap van de les wijzigen met JavaScript. Wat ik eigenlijk wil is wanneer een div hoverd is, moet een andere div zichtbaar worden.

Mijn CSS is als ..

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}
.center{
    float:left;
    height:60px;
    width:160px
}
.center .left1, .center .right1{
    margin:10px;
    float:left;
    border:1px solid green;
    height:60px;
    width:58px;
    display:none;
}

en HTML-bestand is als ..

<div class="left">
    Hello
</div>
<div class="center">
       <div class="left1">
           Bye
    </div>
       <div class="right1">
           Bye1
    </div>    
</div>
<div class="right">
    Hello2
</div>

Wanneer HELLO1 DIV wordt gehouden, moet ByE1 DIV zichtbaar zijn en vergelijkbaar ByE2 zou moeten verschijnen wanneer Hallo2 wordt geluikt.

http://jsfiddle.net/rohan23dec/tqde9/1/

Antwoord 1, Autoriteit 100%

U kunt styleonroerend goed hiervoor gebruiken. Als u bijvoorbeeld wilt wijzigen –

document.elm.style.border = "3px solid #FF0000";

Evenzo voor kleur –

document.getElementById("p2").style.color="blue";

het beste is dat u een klasse definieert en dit doet –

document.getElementById("p2").className = "classname";

(Cross Browser-artefacten moeten dienovereenkomstig worden overwogen).

Antwoord 2, Autoriteit 10%

Gebruik document.getElementsByClassName('className').style = your_style.

var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";

Gebruik enkele aanhalingstekens voor JS-snaren in een dubbele aanhalingstekens van een HTML-kenmerk

Voorbeeld

<div class="somelclass"></div>

Dan document.getElementsByClassName('someclass').style = "NewclassName";

<div class='someclass'></div>

Dan document.getElementsByClassName("someclass").style = "NewclassName";

Dit is persoonlijke ervaring.

Antwoord 3, Autoriteit 7%

// select element from DOM using *const*
const sample = document.getElementById("myid"); // using CONST
// or you can use *var*
var sample = document.getElementById("myid"); // using VAR
// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED

Antwoord 4

Alleen voor de info, dit kan alleen met CSS worden gedaan met slechts minder belangrijke HTML- en CSS-wijzigingen

HTML:

<div class="left">
    Hello
</div>
<div class="right">
    Hello2
</div>
<div class="center">
       <div class="left1">
           Bye
    </div>
       <div class="right1">
           Bye1
    </div>    
</div>

CSS:

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}
.right{
     float :right;
}
.center{
    float:left;
    height:60px;
    width:160px
}
.center .left1, .center .right1{
    margin:10px;
    float:left;
    border:1px solid green;
    height:60px;
    width:58px;
    display:none;
}
.left:hover ~ .center .left1 {
    display:block;
}
.right:hover ~ .center .right1 {
    display:block;
}

en de DEMO: http://jsfiddle.net/pavloschris/y8LKM/

Antwoord 5

Beschouw het volgende voorbeeld:
Als je een enkele CSS-eigenschap wilt wijzigen (bijvoorbeeld kleur in ‘blauw’), dan werkt de onderstaande instructie prima.

document.getElementById("ele_id").style.color="blue";

Maar voor het wijzigen van meerdere eigenschappen is de robuustere manier het gebruik van Object.assign()of, object spread operator {...};

Zie hieronder:

const ele=document.getElementById("ele_id");
const custom_style={
    display: "block",
    color: "red"
}
//Object.assign():
Object.assign(ele.style,custum_style);

De spreidingsoperator werkt op dezelfde manier, alleen de syntaxis is een beetje anders.

Antwoord 6

var hello = $('.right') // or var hello = document.getElementByClassName('right')
var bye = $('.right1')
hello.onmouseover = function()
{
    bye.style.visibility = 'visible'
}
hello.onmouseout = function()
{
    bye.style.visibility = 'hidden'
}

Antwoord 7

Dit is heel eenvoudig met jQuery.

Bijvoorbeeld:

$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});

Ik heb je viool geüpdatet:
http://jsfiddle.net/TqDe9/2/