Question

我想要1300px的两个50％宽度div并使用jQuery或javascript减去200px。我是这个世界的新人，所以帮助我。感谢

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var x = $("#div1").width();
        var y = $("#div2").width();
        x -= 100;
        y -= 100;
        $("#div1").width(x);
        $("#div2").width(y);
    });
});
</script>
</head>
<body>
<div style="width:50%;" id="div1"></div>
<div style="width:50%;" id="div2"></div>
<button>Click</button>
</body>
</html>

Answer 2

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="css/style9.css" rel="stylesheet" type="text/css" />
<title>50% Div</title>
</head>
<body>
<div class="navbar-wrapper">
  <div class="container">
    <div id="firstDiv" class="alert alert-info"></div>
    <div id="secondDiv" class="alert alert-success"></div>
  </div>

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

<script>
    var width = 1300;
    var divWidth = width/2;

    $('#firstDiv').width(divWidth);
    $('#secondDiv').width(divWidth);

</script>


</html>

Answer 3

如果你想使用jquery减去div的宽度，你可以使用jquery来获得div宽度，然后用div width - value减去它。

＆＃13;

$(document).ready(function() {
  $("#subtract").click(function() {
    $('#altered').text("- 35px");
    $('#div2').width($('#div2').width() - 35);
  });
});

＆＃13;

#container {
  width: 600px;
  border: 1px solid black;
}
#div1 {
  width: 50%;
  border: 1px solid red;
}
#div2 {
  width: 50%;
  border: 1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1">
    <p>50%</p>
  </div>
  <div id="div2">
    <p id="altered">50%</p>
  </div>
</div>
<br>
<button id="subtract" type="button">Subtract 35 pixels</button>

＆＃13;

50％宽度div使用jQuery或Javascript

3 个答案: