Как использовать jquery для получения атрибута стиля элемента

У меня есть div, который содержит тег h2 и тэг p.Как использовать jquery для получения атрибута стиля элемента

У меня есть случай, когда div разворачивается (moverenter), цвета фона тега h2 и бирки p обмениваются и при перемещении оставляют его сбрасыванием.

Я рассматриваю это решение, потому что у меня много панелей с различными тегами h2 и тэгами. мой утвердить до сих пор:

<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') 'не является строковым литералом, это оператор, значение которого должно быть передано другой функции. –

Создайте классы вместо стиля css. –

Почему бы вам просто не использовать css ': hover' –

ли вы имеете в виду что-то вроде

$(".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

Я сделал незначительные изменения в код

Надеется, что это решит вашу проблему.

<!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

Только для обмена CSS из p и h2 элементов: -

$('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");

А MouseLeave взять другой BackgroundColor.

источник

2014-10-09 11:47:07 brammekuhh

А для части анимации, если вы работаете с простыми цветами фона, вы можете использовать анимацию().

... 
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 для получения атрибута стиля элемента

ответ

Смежные вопросы