Question

我有15px宽和15px高的元素，并在点击或触摸它们时为它们添加一个类，如下所示：

CSS

.light{
  width:15px;
  height:15px;
}

JQUERY

$(document).on('click touchstart', '.light', function(event){                     
        event.preventDefault();
        $(this).addClass("turned-on");
});

但是，我想单独使用jquery将可点击区域扩展/扩展到40px宽和高，而不是触摸CSS，这可能吗？我根本不想改变CSS，也不想改变元素的外观。

Answer 1

您可以使用.width()和.height()：

$( this ).width( someValueHere );
$( this ).height( someValueHere );

虽然注意到这确实改变了幕后的CSS。您需要在元素的属性中设置宽度和高度并修改它们，这样您就不会更改CSS：

然后做：

$( this ).attr( "width","100px" ); // '100px' is just some value
$( this ).attr( "height","100px" );

<强> Here is an example

注意：这仅适用于某些元素可能会受到更改其宽度和高度属性（如图像或画布）的影响。虽然对于div元素，必须通过CSS（第一种方法）进行更改，但更改它们的属性宽度和高度无效。在这种情况下，您必须更改CSS，否则无法更改。

Answer 2

不确定它是你想要的，如果没有，你可以改善你的问题：

HTML（例如）：

<div class="light"></div>

JQUERY：

$(document).on('click touchstart', '.light-click', function(event){                     
    event.preventDefault();
    $(".light").addClass("turned-on");
});
$(".light").wrap('<div class="light-click"></div>');
$(".light-click").width("40px").height("40px");

JSFIDDLE（我添加了一个css .light-click类和一个背景颜色来查看结果，但你可以删除它们供你使用）：http://jsfiddle.net/ghorg12110/nr9excm1/1/

Answer 3

.light {
    position:relative;
    width:15px;
    height:15px;
    z-Index:1;
}
.light:after {
    content:"";
    display:block;
    position:absolute;
    width:40px;
    height:40px;
    left:-12.5px;
    top:-12.5px;
    z-Index:0;
    background:transparent;
}

＆＃13;

$(document).on("click touchstart", ".light", function (event) {
    event.preventDefault();
    $(this).addClass("turned-on");

});

＆＃13;

.light {
    position:relative;
    left:35%;
    top:50px;
    width:15px;
    height:15px;
    background : orange;
    z-Index:1;
    border:2px solid blue;
}
.light:after {
    content:"";
    display:block;
    position:absolute;
    width:40px;
    height:40px;
    left:-12.5px;
    top:-12.5px;
    background:transparent;
    z-Index:0;
}
.turned-on {
    background:blue;
    border:2px solid orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="light"></div>

＆＃13;

仅使用JQuery扩展元素的可点击区域

3 个答案: