我正在开发一个页脚生成器，如下所示:
当人们填写数据时，它会生成代码和预览图像。
目前它仅适用于商标和公司名称。我在这里想要实现的是，当人们用一些颜色值填充“您的颜色”字段时，我希望它用输入的颜色更改预览的背景颜色。实现这一目标的最佳方法是什么。最终我希望显示输入的值。 我不要求代码只是正确方向上的一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Footer Generator</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>
<!-- Customize your footer and submit -->
<div id="container">
<form class ="form" method="post">
<h3>Select your trademark</h3>
<select class="form-control" name="trademark" action="">
<option></option>
<option>©</option>
<option>™</option>
<option>®</option>
</select>
<h3>Your company name</h3>
<input class="form-control" type="text" name="companyName" placeholder="Your company name" />
<h3>Your Color</h3>
<input class="form-control" type="text" name="customColor" placeholder="Type in the value of your color e.g #ffffff" />
<br/>
<br/>
<button class="form-control" type= "submit" name= "submit">Generate</button>
</form>
<!-- Shows raw code on click -->
<!-- script for the preview image -->
<?php
function footerPreview ()
{
echo "<h3>Preview:</h3>";
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
echo "<div id='footer_date'>$trademark $date $company </div>";
}
// generate result for the head
function rawHead()
{
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";
}
// generate result for the body
function rawBody ()
{
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";
}
// generate result for the CSS
function rawCSS ()
{
$theCSS = htmlspecialchars('color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: "Raleway", sans-serif;
position:fixed;
right: 0;
bottom: 0;
left: 0;',ENT_QUOTES);
echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}
// Generate everything
if(isset($_POST['submit']))
{
footerPreview();
rawHead();
rawBody();
rawCSS();
}
?>
</div>
<div id="generated_footer_date"> © 2016 Footer Generator </div>
</body>
</html>
最佳答案
您有两种方法可以做到这一点:
生成一个新的样式表文件，我的意思是创建另一个文件，并动态链接这个文件
不使用外部样式表文件并使用页面内部的样式...通过这种方式，您可以用来自数据库或其他地方的动态代码替换您的代码。因此，您可以修改
rawCSS();函数并插入类似这样的内容function rawCSS ($color = '#FF0') { $theCSS = htmlspecialchars("color:#ffffff; width:100%; background-color: ${color}; text-align:center; padding-top:15px; height:50px; font-family: 'Raleway', sans-serif; position:fixed; right: 0; bottom: 0; left: 0;",ENT_QUOTES); echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>"; }
我故意将单引号更改为双引号以支持插入字符串....
因此，之后您必须从查询字符串或数据库中提取颜色，就是这样。
关于javascript - 如何使用动态CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40176642/