Javascript 动态更改css中边框的半径

我有一个网站建设者，我已经创建和我有一个div，使人们使用一个按钮。我希望他们能够改变半径，并在屏幕上实时显示

我还有其他的东西，比如字体系列，颜色，字体大小等等。他们都工作得很好。但是我不能改变半径，除了0。它将从某物更改为0。但它不会改变说20px或30px等

下面是代码片段

要从以下内容开始的原始CSS：

 .button {
    border-radius: <?php echo $r['btnradius'];?>px;
    -moz-border-radius: <?php echo $r['btnradius'];?>px;
    -webkit-border-radius: <?php echo $r['btnradius'];?>px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    color: #<?php if($r['btntcolor']!='')echo $r['btntcolor'];else echo"FFFFFF";?>;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    text-decoration: none;
    background: #<?php if($r['btncolor']!='')echo $r['btncolor'];else echo"00dd10";?>;
    display:inline-block;
    font-size: <?php if($r['btntsize']!='')echo $r['btntsize'];else echo"22";?>px;
    padding: 5px 15px 5px 15px;
    max-width: 95%;
 }

---

CSS属性上缺少

px

后缀：

$(".btnradius").css("border-radius", valueSelected + "px");

---

我相信这个问题实际上正如你所说的那样

但是我不能改变半径，除了0。它将从某物更改为0。但它不会改变说20px或30px等

现在您的JavaScript显示

$('#btnradius').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value; //<-- here is the problem
  $(".btnradius").css("border-radius", valueSelected);
});

$（'btnradius'）。关于（'change'，函数（e）{
var optionSelected=$（“选项：已选择”，此选项）；
var valueSelected=this.value；//无需重复三次。
$（“.btnradius”）.css（“border radius”，valueSelected+'px'）；
已经足够了。jQuery将处理所有供应商box@RokoC.Buljan我只是想知道我的字体大小是如何工作的，哈哈。我没有“+”px”最后，它工作得很好。所以我的问题是，为了更好地编码，我应该在我的字体大小代码中添加+“px”吗？这是它的一部分…
$（.threesize”）.css（“font size”，valueSelected）；
@RandyThomas进一步解释显而易见的，
0
是一个有效的css半径值，而
30
（没有单位）不是-这就是将
0
设置为“有效”的原因；@RandyThomas这是因为jQuery让我们这样做，它将一个数值转换为
px
。边界半径似乎不遵循相同的规则。
$('#btnradius').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".btnradius").css("border-radius", valueSelected);
$(".btnradius").css("-moz-border-radius", valueSelected);
$(".btnradius").css("-webkit-border-radius", valueSelected);
 });

$(".btnradius").css("border-radius", valueSelected + "px");

$('#btnradius').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value; //<-- here is the problem
  $(".btnradius").css("border-radius", valueSelected);
});