2

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

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

例如

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

5 回答 5

2

With javascript/jquery you could do this:

see (try putting in #000, or green, or some other color) : http://jsfiddle.net/mH6MK/

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

or php would be like this:

<?
$color = $_GET['color'];
echo '<style type="text/css">body{background:'.$color.';}</style>';
?>
于 2013-07-10T01:56:46.483 回答
2

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

链接到演示 => 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;
 }

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

于 2013-07-10T02:01:59.863 回答
0

你是绝对正确的！您可以使用 PHP，但您可以考虑使用 jquery 并通过 $('input') 获取输入元素并获取值并添加 css。

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

你会做这样的事情：

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

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

于 2013-07-10T02:06:38.230 回答
0

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

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

如果你有元素的name/ id，input那么它的值是：

document.getElementsByName(elementName).value

因此，将这些部分放在一起应该不会太难。只需侦听输入焦点何时发生变化，也许通过onBlur侦听器。

于 2013-07-10T01:57:43.293 回答
-1

为什么不使用jquery？

$('body').css('backgroundColor', [input from box]);
于 2013-07-10T01:52:17.713 回答