如何將樣式分配給 php 語法

Question

我想為輸入字段提供 css 樣式腳本中的值，我有這個：

<script "javascript/text">
    var str1 = '<?php $this->form_validation->cc11_a?>';
    var str2 = '<?php $this->form_validation->cc11_b?>';
    var str3 = '<?php $this->form_validation->cc11_c?>';
    var str4 = '<?php $this->form_validation->cc11_d?>';

    if(str1 == 0){
        str1.style.background= '#fff';
        str1.style.color='#fff';
        str1.value=0;
    }else if(str1 == 1){
        str1.style.background= '#000';
        str1.style.color='#000';
        str1.value=1;
    }
</script>

我想使用我在上述腳本中收到的數據更改這些輸入框的狀態。 <?php $this->form_validation->cc11_a?>正在獲取一個值，但我不知道如何使用它來為正在接收的內容提供狀態。 在我擁有的 html 中。

<input name="cc11_a" type="text" class="text" id="cc11_a" onclick="color(this.id);" style="width:0.3cm;" value="" />
<input name="cc11_b" type="text" class="text" id="cc11_b" onclick="color(this.id);" style="width:0.3cm;" value="" />

這意味着如果<?php $this->form_validation->cc11_a?>收到一個 1 那么它應該是一個黑盒子。

Answer 1

在我看來，你的做法是錯誤的。 為什么要使用 javascript 分配樣式？

根據我的個人經驗，您只能並且應該通過服務器端語言（在您的情況下為 php）來做到這一點。

經驗法則如下：如果頁面的動態行為（在您的情況下是樣式）取決於配置，則應使用服務器端語言進行開發，如果行為取決於用戶交互，則應使用 js 來實現。

如果您使用 php，您可以：

• 直接在節點類屬性上打印樣式。
• 在標簽中打印 css 格式的樣式。
• 將條件樣式與 sass 或更少之類的 css 預處理器一起使用。

Answer 2

function colores(){

    var str1 = '<?php 
    if ($this->form_validation->cc11_a == 1 )
    { echo '1';}
    else if($this->form_validation->cc11_a == 0 ){ echo '0';}
    ?>';
    var str2 = '<?php 
    if ($this->form_validation->cc11_b == 1 )
    { echo '1';}
    else if($this->form_validation->cc11_b == 0 ){ echo '0';}
    ?>';
    var str3 = '<?php 
    if ($this->form_validation->cc11_c == 1 )
    { echo '1';}
    else if($this->form_validation->cc11_c == 0 ){ echo '0';}
    ?>';
    var str4 = '<?php 
    if ($this->form_validation->cc11_d == 1 )
    { echo '1';}
    else if($this->form_validation->cc11_d == 0 ){ echo '0';}
    ?>';

    if(str1 == 0){
        $('#cc11_a').css({'background-color':"#fff", 'color':"#fff"}).val("0");
    } else if(str1 == 1){
        $('#cc11_a').css({'background-color':"#000", 'color':"#000"}).val("1");
    }
    if(str2 == 0){
        $('#cc11_b').css({'background-color':"#fff", 'color':"#fff"}).val("0");
    } else if(str1 == 1){
        $('#cc11_b').css({'background-color':"#000", 'color':"#000"}).val("1");
    }
    if(str3 == 0){
        $('#cc11_c').css({'background-color':"#fff", 'color':"#fff"}).val("0");
    } else if(str1 == 1){
        $('#cc11_c').css({'background-color':"#000", 'color':"#000"}).val("1");
    }
    if(str4 == 0){
        $('#cc11_d').css({'background-color':"#fff", 'color':"#fff"}).val("0");
    } else if(str1 == 1){
        $('#cc11_d').css({'background-color':"#000", 'color':"#000"}).val("1");
    }
}


<td colspan="3" style="text-align:left">
    <input name="cc11_a" type="text" class="text" id="cc11_a" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_b" type="text" class="text" id="cc11_b" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_c" type="text" class="text" id="cc11_c" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_d" type="text" class="text" id="cc11_d" onclick="color(this.id);" style="width:0.3cm;" value="" />
</td>