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

Php 使用表单字段值自定义CSS属性,php,javascript,html,css,input,Php,Javascript,Html,Css,Input,我很确定这一定要用php。。。但让我解释一下我在找什么 我在我的网站上有一个输入框,用户在其中输入的内容被设置为css 比如说 body{ Background-color: [text from the input goes here]; } 为什么不使用jquery $('body').css('backgroundColor', [input from box]); 使用javascript/jquery,您可以执行以下操作: 请参阅(尝试输入#000、绿色或其他颜色): 或者php是

我很确定这一定要用php。。。但让我解释一下我在找什么

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

比如说

body{
Background-color: [text from the input goes here];
}
为什么不使用jquery

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

使用javascript/jquery,您可以执行以下操作:

请参阅(尝试输入#000、绿色或其他颜色):

或者php是这样的:

<?
$color = $_GET['color'];
echo '<style type="text/css">body{background:'.$color.';}</style>';
?>
$('form").on('submit', '#css', function()) {
 var value = $this.val();
 $('body').css('background-color', value); 
});

通过一些测试,我发现可以使用以下方法设置车身背景颜色:

document.body.style.backgroundColor = "purple";
如果您拥有
输入
元素的
名称
/
id
,则其值为:

document.getElementsByName(elementName).value

因此,将这些片段组合在一起应该不会太困难。只需通过一个
onBlur
监听器来监听输入焦点何时发生变化。

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

链接到演示=>

html 您可以改进此功能。可以设置一个检查来确保它是一个有效的十六进制值吗?
检查它是否以#开头,如果不以#开头,请输入一。等等。

你完全正确!您可以使用PHP,但是您可以考虑使用jQuery,并通过$(“输入”)获取输入元素并获取值并添加CSS。 假设您有一个id为#css的输入,我将使用on()方法并使用事件委派来定位特定的id,在本例中是#css

您可以这样做:

<?
$color = $_GET['color'];
echo '<style type="text/css">body{background:'.$color.';}</style>';
?>
$('form").on('submit', '#css', function()) {
 var value = $this.val();
 $('body').css('background-color', value); 
});
您可能需要检查从用户收到的值,并确保它是正确的css十六进制颜色值或其他值。某种形式的验证。
这只是您可以使用的几种方法之一,PHP也是一种选择。

您需要使用javascript或PHP进行此操作。
输入是表单的一部分,对吗?表格是如何处理的?拥有变量后,只需更改body元素的style属性。JavaScript可能就足够了。非常感谢你,如果你不介意的话,我还有一个问题。如果我想用html做这样的事情怎么办。。。就像在一个

之间切换文本一样,你认为哪一个是最好的你是一个福建的天才!!:我非常感谢你
$('form").on('submit', '#css', function()) {
 var value = $this.val();
 $('body').css('background-color', value); 
});