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

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必须是字符串。

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

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函数。

你可以在代码片段中查看它。

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

.cell { 
 
    background-color: lightblue; 
 
}

<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>