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

  • Z时代
  • 2024-01-10
  • 分类：问答

此代码运行良好。如何使该变量成为CSS属性的值？

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

但这代码不起作用

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

为什么第二个代码不能正常工作？

回答：

您必须先声明变量并为其赋值。而且尺寸必须有它的测量单位，所以附加它（在我的情况下为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>

回答：

第一：
我看到你在第二功能创造中的第一功能功能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>

以上是 如何使该变量成为CSS属性的值？ 的全部内容， 来源链接： utcz.com/qa/260125.html

回到顶部