web-dev-qa-db-ja.com

JavaScriptを使用してCSSプロパティを変更する方法

Javascriptを使用してクラスのcssプロパティを変更したい。私が実際に欲しいのは、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;
}

.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;
}

そしてhtmlファイルは….

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

Hello1 divがホバーされると、bye1 divが表示され、hello2がホバーされると同様にbye2が表示されます。

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

javascriptcsshover
17
Rohan Das

これにはstyleプロパティを使用できます。たとえば、境界線を変更する場合-

_document.Elm.style.border = "3px solid #FF0000";
_

色についても同様です-

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

最も良いのは、クラスを定義してこれを行うことです-

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

（それに応じて、クロスブラウザのアーティファクトを考慮する必要があります）。

25
Ved

document.getElementsByClassName('className').style = your_styleを使用します。

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

html属性の二重引用符内に含まれるJS文字列に単一引用符を使用

例

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

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

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

次にdocument.getElementsByClassName("someclass").style = "NewclassName";

これは個人的な経験です。

5
Dipesh Parmar

情報のためだけに、これはCSSでHTMLとCSSをわずかに変更するだけで行うことができます

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;
}

およびデモ： http://jsfiddle.net/pavloschris/y8LKM/

0
xpy
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'
}
0
masoud