如何使用动态CSS
[英]How to use dynamic CSS
问题描述
我正在研究类似以下的页脚生成器：
当人们填写数据时，它会生成代码以及其外观的预览图像。
目前，它仅适用于商标和公司名称。 我要在这里实现的是，当人们用一些颜色值填充“您的颜色”字段时，我希望它使用输入的颜色来更改预览的背景颜色。 实现此目标的最佳方法是什么。 最终，我希望显示输入的值。 我并不是在要求代码只是朝着正确方向发展。
<!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>
2 个解决方案
解决方案1
2 2016-10-21 12:36:32
您有两种方法可以做到这一点：
生成一个新的样式表文件，我的意思是创建另一个文件，并动态链接此文件
不要使用外部样式表文件，而不能在页面内使用样式。...通过这种方式，您可以将代码替换为来自DB或其他位置的动态代码。 因此您可以修改
rawCSS();功能和inse放这样的东西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>"; }
我故意将单引号改为双引号以支持插值字符串。
因此，在那之后，您必须从query string或database提取颜色，仅此而已。
解决方案2
1 已采纳 2016-10-21 12:35:55
您可以使用JavaScript（可能是JQuery）动态加载元素，以使其更易于选择和更改元素。 我下面有一个示例如何动态更改页面中任何元素的颜色：
$('body').on('blur', '#stylemenowcolor', function(){ $('.stylemenow').css('background-color', '#' + $(this).val()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="stylemenow"> test </div> <input placeholder="(eg 00ff00)" type="text" id="stylemenowcolor">
如何在Nuxt中使用动态CSS文件？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.