Question

我想知道是否可以在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文件在外部。

Answer 1

你真的不需要为此使用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文件可能会更好地使用$_GET[]变量而不是$_SESSION[]变量，因为您将无法从用户端HTML设置会话变量。

Answer 2

最简单的方法是在html页面中包含所需的css。您可以使用一些javascript来完成任务。如果需要将css保存在外部文件中，则需要使用PHP生成它。然后将颜色发送回服务器，重新创建css文件并再次提供页面。似乎有点复杂的imho。

Answer 3

如果您想从会话中获取数据，可以使用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");

}

在onchange事件中更新css

3 个答案: