動態更改CSS中邊框的半徑

Question

我有一個已經創建的網站構建器，並且有一個使用戶可以使用的按鈕的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%;
 }

半徑大小的選擇：

 <SELECT id="btnradius" name="btnradius" class="form-control"
 style="width:90px; font-size:10px;">
 <option value="<?php echo $r['btnradius']?>"> <?php echo $r['btnradius']? </option>
 <option value="0">0</option>
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="40">40</option>
 <option value="50">50</option>
 <option value="60">60</option>
 </select>

即時更改的代碼：

 <div class="button blank4 color_change tcolor_change tsize_change   
 btnradius" style="border-radius: <?php echo $r['btnradius'];?>px; -moz-
 border-radius: <?php echo $r['btnradius'];?>px; -webkit-border-radius: <?
 php echo $r['btnradius'];?>px;" id="btncolor"><?php echo $r['subtext4']?> 
 </div> 

該腳本可隨時更改上述代碼：

$('#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);
 });

Answer 1

您在CSS屬性上缺少px后綴：

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

小提琴

Answer 2

我相信這個問題實際上就是您所說的。

但是我無法將半徑更改為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);
});

注意this.value井，它將是您在下拉框中選擇的option的值。 現在，所有值都缺少值末尾的px 。

這可以通過兩種方式更改。

1. 將option標簽的value更改為#.px （即60px ）
2. 修改valueSelected選項以讀取var valueSelected = this.value + 'px';

0有效為0的原因不需要單位說明符。 但是所有其他值（即px ， em ， %等）