使用 php 提交到 mysql 数据库的动态 css 和 javascript答案

【问题标题】：Dynamic css and javascript submitting to mysql database with php使用 php 提交到 mysql 数据库的动态 css 和 javascript
【发布时间】：2017-02-27 18:02:33
【问题描述】：

我可以选择使用 Adobe Flash 或使用 javascript 创建动态弓弦网站。如何使用 PHP 创建选择提交给 MySql 的颜色？

<html>
<head>
<TITLE>Cool Javascript</title>
<style>
body {
      background-color: linen;
      margin: 0;
}

    #blueDiv {
        position: absolute;
        top: 100px;
        background-color: blue;
        width: 150px;
        height: 150px;          
      }
    #yellowDiv {
      position: absolute;
      top: 100px;
        background-color: yellow;
        width: 150px;
        height: 150px;  
        }
</style>
</head>
<body>
<button onclick="blue()"> blue button </button>

<button onclick="yellow()"> yellow button </button>
    <div id="blueDiv">
    </div>
    <script>
        var div = document.getElementById('blueDiv');
        function blue() {
            div.setAttribute("id", "blueDiv");
            }
        function yellow() {
            div.setAttribute("id", "yellowDiv");
            }
    </script>
    </body>
</html>

我可能需要考虑在我的 css 脚本中使用图像。请就上述内容提出建议，因为我已经坚持了好几个月了。

【问题讨论】：

标签： javascript php css dynamic

【解决方案1】：

这是将点击按钮的颜色保存到隐藏输入的方式：

var colorsToBeSelected = document.querySelectorAll('.color-selector');
var selected = document.getElementById('selected');
colorsToBeSelected.forEach(color => {
 color.addEventListener('click', (e) => {
   selected.value = window.getComputedStyle(color).getPropertyValue('background');
   console.log(selected.value, 'was selected');
 });
});

.blue { background: blue; }
.yellow { background: yellow; }

<button class="color-selector blue">blue button</button>
<button class="color-selector yellow">yellow button</button>
...
<input hidden type='text' id='selected' name='selected'/>

每次用户单击任何彩色按钮时，它的背景属性都会存储在您的输入值中。背景，正如您提到的图像（仅考虑颜色的背景颜色）。提交时，它将被存储为$_POST['selected']，其中'selected' 是输入的name 属性的值。

【讨论】：

感谢您的回答。这绝对是一个不错的选择。
我试过你的建议，但它返回“no Value”。
我已经调查过了，'background' 只返回了整个 bg 属性，所以在我的小提琴中，我只是用一些字符串操作取了第一个值。 jsFiddle
"我创建了一个表单提交按钮，但它会在选择颜色的那一刻提交。让我快速解释一下我的问题...我正在尝试创建一个具有 2 或 3 种不同颜色的弓弦设计. 这就是我的想法：techwisecorp.co.za/bowstring.JPG 如果我只有正方形的颜色，那它就行不通。这就是我想要包含图像的原因。你认为最好的方法是什么？

【解决方案2】：

只使用 cookie 怎么样？喜欢：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
} 

function blue() {
    div.setAttribute("id", "blueDiv");
    setCookie('last-color', 'blue', 3);
}


function yellow() {
    div.setAttribute("id", "yellowDiv");
    setCookie('last-color', 'yellow', 3);
}

if(getCookie('last-color') == 'yellow'){
    yellow();
}

函数setCookie 和getCookie 来自：http://www.w3schools.com/js/js_cookies.asp

【讨论】：

感谢您的快速回复。我只是担心并非所有浏览器都启用了 cookie。如果我可以用 php 会话做点什么，那么它可能会有所帮助。
@Schalk 然后使用 ajax 调用，php 会将最后一种颜色保存到会话中，并在输出页面内容时执行以下操作：if($_SESSION['last-color'] == 'yellow'){ echo '<script>yellow();</script>'; }