Question

我正试图弄清楚如何使用jQuery为元素添加边框属性。

例如，我读到jQuery不支持CSS属性border-width。相反，我应该声明一个变量（即var borderWidth = .css（“border-width”）;,并在一个语句中调用该变量。但它没有按预期工作。

另一个问题是，JSHint一直在告诉我的var缺少“;”，但它们显然在那里。

var borderTop = .css("border-top-width");
var borderTopColor = .css("border-top-color");

标记很简单：

<ul class="nav-tabs">
<li class="active"><a href="#">List View</a>

</li>
<li class="next"><a href="#">Map View</a>

</li>

查看我的小提琴here。

我们一如既往地提供任何帮助。

谢谢！

Answer 1

Jquery只是一个平台，可以帮助您快速轻松地访问css和javascript。如果运行代码来更改任何元素的css属性，则意味着您在运行时动态创建该元素的css。几乎可以使用jquery访问css和javascript的每个属性。

您可以这样编写代码。

if ($('.nav-tabs:contains(li)')) {
$('.active').css('border-style','solid')
$('.active').css('border-color','red')
$('.active').css('border-width','10px')
}

或者这是在代码的一个条件下完成的修改：

 //if class "active" contains "Map View"
if ($('.nav-tabs:contains(li)')) {
    $('.next:contains(Map View)').css({'border-style':'solid','border-top':'thick single #ff0000'})
$('.next').css('border-color','red')

    }

愿这对你有所帮助。请以相同的方式进行更改，无需采取变量。您为不同的css属性提供的值不正确。请关注：

http://www.w3schools.com/css/css_border.asp

它将帮助您理解语法。

Answer 2

这里有一点FIDDLE可以让你入门。

您可以根据需要使用样式，添加课程，删除课程等。

我认为一些关键问题是：

您可以在HTML元素中包含两个或更多个类。
您经常需要＆＃34;删除课程＆＃34;在你之前＆＃34;添加一个课程＆＃34;所以不会发生冲突。
您可以使用.on（＆＃39;点击＆＃39;或.click（.click赢了，让您访问动态生成的元素）
＆＃39;提醒＆＃39;我添加的只是为了给你一个跳跃/运行另一组代码的点。

JS

$listview = $('.listview');
$mapview = $('.mapview');

$listview.on('click', function(){
      $listview.removeClass('inactive').addClass('active');
      $mapview.removeClass('active').addClass('inactive');
      $listview.css("border", "4px solid green");
      $mapview.css('border', '0px solid green');
      alert("I'm showing you a list");
                                      });
$mapview.on('click', function(){
      $mapview.removeClass('inactive').addClass('active');
      $listview.removeClass('active').addClass('inactive');
      $mapview.css("border", "4px solid green");
      $listview.css('border', '0px solid green');
      alert("I'm showing you a map");
                                      });

使用jQuery的CSS border属性

2 个答案: