使用表单字段值自定义CSS属性
使用表单字段值自定义CSS属性
提问于 2013-07-10 09:45:48
我很确定这一定要用php..。但让我解释一下我要找的是什么。
我在我的网站上有一个输入框，用户在其中输入的任何内容都被设置为css
例如
body{
Background-color: [text from the input goes here];
}回答 5
Stack Overflow用户
回答已采纳
发布于 2013-07-10 09:56:46
使用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>';
?>Stack Overflow用户
发布于 2013-07-10 10:02:00
您可以使用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;
}然后，您可以改进此功能。也许可以设置一个检查来确保它是一个有效的十六进制值？检查它是否以#开头，如果不是，则输入一个。
Stack Overflow用户
发布于 2013-07-10 09:57:43
通过一些测试，我发现可以使用以下命令设置正文背景颜色：
document.body.style.backgroundColor = "purple";如果您有input元素的name/id，那么它的值是：
document.getElementsByName(elementName).value因此，将这些部分放在一起应该不会太难。只需监听输入的焦点何时发生变化，可能是通过onBlur侦听器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17561184
复制相关文章
相似问题
腾讯云开发者
