使用jQuery变量作为CSS属性

原谅我，如果我没有问这个问题，我是这个网站的新手。我正在从The Odin Project的Etch-a-Sketch项目开始工作，你们中的一些人可能会熟悉它。基本上在这一点上，我想要做的是使用jquery中的按钮来调整一些div的大小，并且我想知道是否可以使用函数设置这些div（高度和宽度）的CSS属性使用jQuery变量来设置新的大小。使用jQuery变量作为CSS属性

当我单击新建网格按钮时，我希望它根据我在提示中输入的数字来调整我的div的高度和宽度。

这是我到目前为止有：

$("#new_grid").click(function() { 

var height = 448/size; 
var width = 448/size; 
var resizePix = function() { 
    $(".pixel").css({"height": ???, "width": ???}); 
     $(".pixel").appendTo("#grid"); 
    } 

var size = prompt("Enter new grid size (10 - 100):"); 
    if (size < 10) { 
     alert("Number is too small."); 
    } else if (size > 100) { 
     alert("Number is too big."); 
    } else if (size >= 10 || size <= 100) { 
     resizePix(); 
     }

什么我希望做的是有.pixel的CSS属性反映了来自后进入的提示任何数量的“大小”变量点击按钮。例如，如果我在提示时输入20，那应该会导致将448（容器div的高度和宽度，其中包含我尝试调整大小的div）除以20，并使用该值更改CSS高度和宽度属性。

我对此有何看法？我知道resizePix函数可以工作，因为如果我只使用常规值来更改CSS，则使用按钮时会反映这些更改。我只是无法弄清楚如何让我的高度和宽度变量改变CSS属性。

来源

2017-04-23 Justin D

不知道我的理解，但是这是你想要做什么？ https://codepen.io/anon/pen/EmyqvQ –

为什么使用'$（“。pixel”）。appendTo（“＃grid”）;'不是单元的数量取决于新的网格大小？ –

另外这个'else if（size> = 10 || size <= 100）{'是完全不必要的。你只需要'else {'（因为你已经在前面的语句中定义了范围） –

除以你的函数里面，不在外面吧

$("#new_grid").click(function() { 
 
    
 
    // Not here... 
 

 
    function resizePix() { 
 
    var px = 448/size; // ...but here (P.S: Math.round() could also help?) 
 
    $(".pixel").css({height: px, width: px }); 
 
    $(".pixel").appendTo("#grid"); // I think this line is useless 
 
    } 
 

 
    var size = prompt("Enter new grid size (10 - 100):"); 
 
    
 
    if (size < 10) { 
 
    alert("Number is too small."); 
 
    } else if (size > 100) { 
 
    alert("Number is too big."); 
 
    } else {       // yep, just a nice else 
 
    resizePix(); 
 
    } 
 

 
});

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

 
<button id="new_grid">GRID SIZE</button>

来源

2017-04-23 21:33:37

这样做，谢谢！ –

@JustinD如果它解决了您的问题，请将此答案标记为已接受。 –

使用jQuery变量作为CSS属性

回答

相关问题