在 onchange 事件中更新 css [重复]答案

【问题标题】：Update css at onchange event [duplicate]在 onchange 事件中更新 css [重复]
【发布时间】：2014-01-05 01:34:25
【问题描述】：

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

【问题讨论】：

@RUJordan 可以，只需创建一个 PHP 文件，调用一个标题说它是 css。然后将其用作变量。

标签： php html css events session

【解决方案1】：

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

}

【讨论】：

【解决方案2】：

你真的不需要为此使用 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 设置会话变量。

【讨论】：

非常感谢，这可能对我有帮助。并进一步解释。我不使用任何 HTML 来创建我的页面。我有一个标准的 HTML CSS 布局。并使用 index.php 创建对象，如内容、标题、文件链接，以便能够创建一个非常动态且易于编辑的网站。但我不知道你可以只用 javascript 来改变样式。非常感谢
你解决了我的问题，非常感谢，没想到会这么简单。

【解决方案3】：

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

【讨论】：