имеет ли элемент рамку
Здравствуйте, не могу решить элементарную задачу, есть страница с элементами. при щелчке на элемент у него появляется рамка, при повторном должна убираться.
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script type="text/javascript">
$('p').css('border','none');
$('p').click(function(){
alert(3);
if($(this).css('border')=='none')
$(this).css('border','1px solid black');
else
$(this).css('border','none');
});
</script>
</body>
Проую этот код, ничего не работает , если вызвать alert($(this).css('border')) элемента с границей, выдасться пустота. |
лучше используйте классы и переключайте их
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Test</title>
<style>
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script>
$('p').click(function () {
$(this).toggleClass('border');
});
</script>
</body>
</html>
|
да, спасибо, так работает:
if($(this).hasClass('sel0'))
$(this).removeClass('sel0');
else
$(this).toggleClass('sel0');
но всё ранво проблемма стрнаная |
если очень хочется использовать .css('border....')
то можно так
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script type="text/javascript">
$('p').click(function(){
if($(this).css('border-left-style') !== 'solid')
$(this).css('border','1px solid black');
else
$(this).css('border','none');
});
</script>
просто .css() возвращает то что возвращает getComputedStyle а там обычно все разбито на отдельные элементы |
| Часовой пояс GMT +3, время: 08:17. |