如何使用jquery獲取元素的樣式屬性

我想要一個案例，如果div被徘徊（moverenter），h2標籤和p標籤的背景顏色會被交換，並且在移動時它會重置。

我在尋找這個解決方案，因爲我有許多不同的h2標籤和p標籤的面板。我同意迄今：

<div class="panel"> 
    <h2 class="title">This is the title</h2> 
    <p class="desc">This is a decription</p> 
</div>

了jQuery我想

$(document).ready(function(){ 
    $(".panel").mouseenter(function(){ 

    exchange($(this)); 
}).mouseleave(function(){ 

    exchange($(this)); 
}); 

function exchange(e){ 
var x = e.children(".title"), 
    y = e.children(".desc"); 

x.css("background", "y.css('background')"); 
} 

});

不好意思，剛學JS

NB：因爲我還沒有得到它的工作，我也一直在尋找在交易所平穩過渡效果

來源

2014-10-09 user2666633

'x.css（「背景」，y.css（ '背景'））;' - 'y.css （'background'）'不是一個字符串，它是一個語句，其值必須傳遞給另一個函數 – 2014-10-09 11:34:03

創建類而不是樣式css。 – 2014-10-09 11:39:48

爲什麼你不使用css'：hover' – 2014-10-09 11:48:13

你的意思是這樣

$(".panel").mouseenter(function() { 
 
    var $this = $(this), 
 
     $h2 = $this.children('h2'), 
 
     $p = $this.children('p'), 
 
     h2c = $h2.css('background-color'), 
 
     pc = $p.css('background-color'); 
 

 
    $h2.css('background-color', pc); 
 
    $p.css('background-color', h2c); 
 
}).mouseleave(function() { 
 
    $(this).children('h2, p').css('background-color', ''); 
 
})

.panel h2 { 
 
    background-color: lightgrey; 
 
} 
 
.panel p { 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel"> 
 
    <h2 class="title">This is the title</h2> 
 
    <p class="desc">This is a decription</p> 
 
</div> 
 
<div class="panel"> 
 
    <h2 class="title">This is the title</h2> 
 
    <p class="desc">This is a decription</p> 
 
</div> 
 
<div class="panel"> 
 
    <h2 class="title">This is the title</h2> 
 
    <p class="desc">This is a decription</p> 
 
</div>

來源

2014-10-09 11:46:25

我沒有檢查一切，但不會工作：

x.css("background", "y.css('background')");

試着這麼做：

var bgY = y.css('background'); 
x.css("background", bgY);

來源

2014-10-09 11:36:57

y.css（'background'）沒有獲取背景顏色 – user2666633 2014-10-09 11:41:16

我做了小的改動你的代碼

希望它可以解決您的問題。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.10.2.js"></script>  
    <script src="Scripts/jquery-ui-1.10.4.js"></script> 
    <link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
     $(function() { 
      $(".panel").mouseenter(function() { 
       $(".panel").toggle(); 
      }).mouseleave(function() { 
       $(".panel").toggle(); 
      }); 
     }) 
    </script> 

</head> 
<body> 
<div class="panel" style="display:none" > 
    <h2 class="title" style="background-color:gray">This is the title</h2> 
    <p class="desc" style="background-color:lightgray">This is a decription</p> 
</div> 
<div class="panel" style="display:block" > 
    <h2 class="title" style="background-color:lightgray">This is the title</h2> 
    <p class="desc" style="background-color:gray">This is a decription</p> 
</div> 
</body> 
</html>

來源

2014-10-09 11:43:41 Abhishek

對於只有p和h2元素交換CSS： -

$('div.panel').on('hover',function(){ 
     $(this).find('.title').css('background-color','blue'); 
     $(this).find('.desc').css('background-color','green'); 
    },function(){ 
     $(this).find('.title').css('background-color','green'); 
     $(this).find('.desc').css('background-color','blue'); 
    });

現在假設，假設你設置一些background-color您p和h2元素。

CSS

.title{ 
     background-color: green; 
    } 
    .desc{ 
     background-color: blue; 
    }

SCRIPT

 $('div.panel').on('hover',function(){ 
     $(this).find('.title').css('background-color','blue'); 
     $(this).find('.desc').css('background-color','green'); 
    },function(){ 
     $(this).find('.title').removeAttr('style'); 
     $(this).find('.desc').removeAttr('style'); 
    });

來源

2014-10-09 11:44:52

你可以找到面板的所有孩子，並改變他們的背景顏色。

你可以的MouseEnter做到這一點：

$(".panel").children().css("background-color","red");

而且在鼠標離開採取另外的backgroundColor。

來源

2014-10-09 11:47:07 brammekuhh

對於動畫部分，如果您使用簡單的背景色，則可以使用animate（）。

... 
function exchange(e) 
{ 
    var x = e.children(".title"), 
     y = e.children(".desc"); 
     bg1 = x.css('background-color'), 
     bg2 = y.css('background-color'); 

    x.animate({ "background-color": bg2 }, 1500); 
    y.animate({ "background-color": bg1 }, 1500); 
} 
...

來源

2014-10-09 11:48:41

在這裏，你是一個工作示例http://jsfiddle.net/9a1qe9q9/2/

jQuery的

$(".panel").mouseenter(function() { 

    exchange($(this)); 

}).mouseleave(function() { 

    exchange($(this)); 
}); 

function exchange(e) { 
    var x = e.children(".title"), 
     y = e.children(".desc"), 
     xColor = x.css('background'), 
     yColor = y.css('background'); 

    x.css("background", yColor); 
    y.css("background", xColor); 
}

來源

2014-10-09 11:51:25

如何使用jquery獲取元素的樣式屬性

回答

相關問題