的HTML

Question

我很确定这将是必须在PHP ...但让我解释一下我在寻找什么。

我的网站上有一个输入框，用户输入的内容设置为css

例如

body{
Background-color: [text from the input goes here];
}

Answer 1

使用javascript / jquery，你可以这样做：

请参阅（尝试输入＃000，或绿色或其他颜色）：http://jsfiddle.net/mH6MK/

$( document ).ready(function() {
   $('input[name=getColor]').change(function() { 
       var $color = $("#getColor").val();
       $('body').css('backgroundColor', $color);
   });
});

或php会是这样的：

<?
$color = $_GET['color'];
echo '<style type="text/css">body{background:'.$color.';}</style>';
?>

Answer 2

您可以使用jquery，但如果您不使用jquery，我建议使用纯javascript。它更快，更强大。

链接到demo =＆gt; http://jsfiddle.net/77Bjx/

的HTML

<input placeholder="enter hex color w/o #" id="bg" type="text"/>
<input type="button" value="submit" onClick="setBG()"/>

的javascript

function setBG() {
    var elem = document.getElementById('bg')
    document.body.style.backgroundColor = '#' + elem.value;
 }

你可以改进这个功能。也许设置一个检查，以确保它是一个有效的十六进制值？检查它是否以＃开头，如果没有则输入一个＃。等。

Answer 3

通过一些测试，我发现可以使用以下方法设置身体背景颜色：

document.body.style.backgroundColor = "purple";

如果您拥有name元素的id / input，则其值为：

document.getElementsByName(elementName).value

所以把这些碎片放在一起应该不会太难。只需通过onBlur监听器来监听输入焦点何时发生变化。

Answer 4

你说得对！您可以使用PHP，但您可以考虑使用jquery并通过$（'input'）获取输入元素并获取值并添加css。

假设你有一个id为#css的输入，我将使用on（）方法并使用事件委托来定位特定的id，在这种情况下是#css。

你会做这样的事情：

$('form").on('submit', '#css', function()) {
 var value = $this.val();
 $('body').css('background-color', value); 
});

您可能需要检查从用户收到的值，并确保它是正确的css十六进制颜色值或其他值。某种形式的验证。这只是您可以采用的几种方法之一，PHP也是一种选择。

Answer 5

为什么不使用jquery？

$('body').css('backgroundColor', [input from box]);

使用表单字段值自定义CSS属性

5 个答案:

的HTML

的javascript