在onchange事件中更新css

我想知道是否可以在onchange事件中編輯css屬性。在onchange事件中更新css

我的HTML +腳本

<div class="Content"> 

     <input id="ColorSlider" type="range" min="0" max="360" value="25" onchange="showValue(this.value)"/> 
     <div id="ColorViewer"> 
      Color value = 25 
     </div> 

     <script> 
      function showValue(newValue){ 
       document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue; 
      //something here that sends the value to the css file

}

而我的CSS，這是目前從不同的PHP文件

<?php 
header('Content-type: text/css'); 
    session_start(); 

    $CssBorder = $_SESSION['CssBorder']; 
    $CssH1BackgroundColor = $_SESSION['CssH1BackgroundColor']; 

?>

接收會話變量是否有可能發送一個變量（也許通過PHP會話）到CSS文件。並更改HTML邊框的顏色？

爲了清除目的，我希望我的css文件是外部的。

來源

2013-12-17 Krijn van der Burg

@RUJordan可以，只需要創建一個PHP文件改變顏色，稱之爲頭說這是CSS。然後將其用作變量。 <？php echo $ CssH1BgroundgroundColor？> –

你真的不需要爲此使用PHP。這可以很容易地使用JavaScript來完成。

<script> 
function showValue(newValue){ 
    document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue; 
    //something here that sends the value to the css file 
    document.getElementById("ColorViewer").style.border = "[width] [style] [colour]"; 
} 
</script>

然而，如果你絕對必須動態使用加載生成外部樣式表那麼下面的鏈接jQuery的可能是你有幫助：

How to load up CSS files using Javascript?

而且你的PHP生成CSS文件大概會這樣回答更好地使用$_GET[]變量而不是$_SESSION[]，因爲您將無法從用戶端HTML設置會話變量。

來源

2013-12-17 10:40:47 AeroX

非常感謝您的幫助。並進一步解釋。我不使用任何HTML來創建我的網頁。我有一個HTML CSS的標準佈局。並使用index.php創建對象，如內容，標題，文件鏈接，以便能夠創建一個易於編輯的非常動態的網站。但我不知道你可以改變只有JavaScript的風格。非常感謝你 –

你解決了我的問題，非常感謝，從來沒有想過這會很容易。 –

最簡單的方法是在html頁面中包含所需的CSS。你可以使用一些JavaScript來完成任務。如果您需要將css保存在外部文件中，則需要使用PHP生成它。然後將顏色發回服務器，重新創建css文件並再次提供頁面。似乎有點複雜的imho。

來源

2013-12-17 10:30:44 Elmer

如果您想從會話中獲取數據，可以使用AJAX。

function showValue(newValue){ 
     $("#ColorViewer").html("Color value = " + newValue); 
     $.get("sessionpage.php",function(data,status){ //print green,blue from session, seperated using comma. 
      var colors = data; //"green,blue"; 
      var colorsArray =colors.split(","); 
      var CssBorder = colorsArray[0]; 
      var CssH1BackgroundColor= colorsArray[1]; 
      $("#ColorViewer").css('background-color', CssH1BackgroundColor); 
      $("#ColorViewer").css("border","5px solid"); 
      $("#ColorViewer").css("border-color",CssBorder); 
     }); 

}

對於剛剛使用jQuery

function showValue(newValue){ 
    $("#ColorViewer").html("Color value = " + newValue); 
    $("#ColorViewer").css('background-color', "green"); 
    $("#ColorViewer").css("border","5px solid blue"); 

}

來源

2013-12-17 11:17:58

在onchange事件中更新css

回答

相關問題