如何使用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获取元素的样式属性

回答

相关问题