Question

此代码效果很好。

   function changecss() {
     $(".cell").css("background-color", "black");
   }

但是这段代码不起作用

   function changecs() {
     $(".cell").css("width", num);
     var num = 33
   }

为什么第二个代码不起作用？

Answer 1

您必须先声明变量并为其赋值。而且尺寸必须有它的测量单位，所以也加上它（px在我的情况下）。

function changecs() {
     var num = 33;
     $(".cell").css("width", num + 'px'); 
}

<强> Exmple

const num = 500;
$('#div').css('width', num + 'px');

div {
   background-color: red;
   height: 100px;  
}

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

Answer 2

第一：
我看到你在第一个函数上创建函数changecss，然后在第二个函数上创建changecs。如果您正在使用onclick="changecss"之类的内容，则应将第二个功能从changecs重命名为changecss。

第二名：
您在调用该变量后创建变量？
javascript如何获得该变量？

function changecs() {
   $(".cell").css("width", num);
   var num = 33
}

您正在创建变量，听起来您想要在有需要时轻松更改它。将变量转换为string，因为num必须是字符串。

它易于使用，而不是在您创建的每个+ 'px'中键入num

function changecs() { // or changecss() {
   var width = '33px';
   var height = '33px';
   $(".cell").css('width', width);

   // OR you can use this for more than 1 css
   $(".cell").css({
     'height': height,
     'width': width
   })
}

如果您希望代码在somebutton上运行，请点击此处更改您的功能。

$('#buttonid').on('click', function() {
    var height = '50px';
    var width = '50px';
    $(".cell").css({
        'height': height, 
        'width': width
    })
})

因为您正在使用Jquery添加额外的css，所以它也可以更好地使用该jquery函数。

您可以在代码段上查看。

＆＃13;

$("#buttonid").on("click",function() {
			var height = '100px';
			var width = '100px';
			$(".cell").css({
        'height': height, 
				'width': width
			})
})

＆＃13;

.cell {
  background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cell">

</div>
<hr>
<button id="buttonid">Click Me to See The Result</button>

＆＃13;

如何使该变量成为css属性的值？

2 个答案: