Question

我想使用类似此代码的内容来更改网页的背景颜色和文字颜色。它可用于更改标题bg颜色，颜色和菜单下拉背景颜色和颜色。但不是菜单的颜色，也不是菜单的顶部栏。只是影响下拉的框，所以整齐的代码。

但如果我想＆＃34;记得＆＃34;我的整个网页的选择，比如让用户可以选择更改颜色，而不是更改样式表，因为我有不同宽度和高度的样式表等。

我是否必须使用cookies来做我想要的事情？

Purple COLOR Js

function greenColor(){     document.getElementById("content").style.backgroundColor = "purple";
            document.getElementById("copyW").style.backgroundColor = "purple";
            document.getElementById("text").style.backgroundColor = "white";

                            var parentElement =     document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

        var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: purple");

            }

                            var parentElement =
document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

    }
    }

RED COLOR Js

    function redColor(){
            document.getElementById("content").style.backgroundColor = "red";
            document.getElementById("copyW").style.backgroundColor = "red";
            document.getElementById("text").style.backgroundColor = "white";

                            var parentElement =     document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: red");

            }


                        var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }
            }

高对比度Js

function contrastColor(){
            document.getElementById("content").style.backgroundColor = "black";
            document.getElementById("copyW").style.backgroundColor = "grey";
            document.getElementById("text").style.backgroundColor = "black";
                var parentElement = document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: white");

            }



            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: black");

            }
                var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: white");

            }

            }
            function normalColor(){
            document.getElementById("content").style.backgroundColor = "green";
            document.getElementById("copyW").style.backgroundColor = "green";
            document.getElementById("text").style.backgroundColor = "white";
                var parentElement = document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

             }



            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: green");

            }
                var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

            }

然后这是Css

#buttons{
z-index:1;      
display:inline;
border: none;
height:1em;
top:7.5em;
position:absolute;
right:0em;
}
#normal {
background:#008000;
background-size:cover;
cursor:pointer;
}
#purple{
    background:purple;
    background-size:cover;
    cursor:pointer;
    }
#red {
    background:#FF0000;
    background-size:cover;
    cursor:pointer;
    }
#contrast{
    background:black;
    color:white;
    cursor:pointer;
    background-size:cover;
    }

我的html只是一个标题，一个改变背景颜色的页脚，然后是一个高对比度的版本，也会更改文本颜色，因此我设置＆＃34;后退＆＃34;，或选择更改它自然是javascript中的黑色文本颜色。

那么，是否可以更改我的整个网页，然后如果我必须使用cookie来执行此操作，如何设置cookie以选择是否保存颜色 - 用户选择颜色？

提前谢谢你的帮助:) 是否可以在javascript中更改css3-animations的样式，就像我在使用背景颜色一样？

Answer 1

您不必使用Cookie。如果您不需要服务器参与用户的颜色设置，我建议您使用localStorage。

Answer 2

是的，你可以用cookies做到这一点。但这对localStorage来说可能更好。 localStorage的几个好处是：

localStorage没有过期而不是Cookie
localStorage拥有5mb的存储容量。这明显大于cookies~4kb
localStorage在客户端提供，删除额外的http请求。

Answer 3

使用本地存储来存储用户选择的颜色。例如，这里是a working jsFiddle

<强>的jQuery

// add a handeler to a color picker element
$('#myColor').change(function() {

    // get the color from the changed picker
    var colorCode = $(this).val();

    // set the color to our header
    $("#myHeader").css("background-color", colorCode );

    // save the color to the browser's `localstorage`
    localStorage.setItem("colorCode", colorCode) ;
});


// when page loads, check if user has a colorcode stored in local storage
if (localStorage.getItem("colorCode") !== null) {

    // if so, set the color to our header and the picker
    var colorCode = localStorage.getItem("colorCode");
    $('#myColor').val( colorCode );
    $("#myHeader").css("background-color", colorCode );
}

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myHeader"></div>
<br>
<br>
<br>
Pick a color: <input type="color" id="myColor" value="#cccccc" />

<强> CSS

#myHeader{
  height:100px;
  width:100%;
  background-color:#cccccc;
}

Answer 4

localstorage似乎是要走的路，谢谢。在构建网页时，我试图让它适合移动设备。我的第一个想法是在页面底部隐藏（显示：无）链接，因为我的网页版本中有一个悬停菜单。然后我在移动设备中隐藏，反之亦然。

这是一种不好的做法吗？

var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","background-color: black");

我现在已经了解到，我可以轻松使用javascript来隐藏和显示菜单，这是一个更好的解决方案，因为大多数人现在都启用了javascript，对吧？但后来我来到移动设备，并不是每个人都有js，这是正确的假设，还是在他们的系统中实现了js？我在想，我可以改变上面的代码，隐藏并显示我的'ul'，但自然不会隐藏第一个ul，它自己的菜单。这样，我想将我的悬停功能保留在我的桌面上，但在我的手机中有一个onclick，似乎只能隐藏桌面版中的onclick按钮...

现在，似乎我在桌面样式表中设置的任何悬停操作也会影响我的移动样式表..我明白这是因为它将它全部渲染到一个样式表中，当然，它会发现悬停，并在我的机器人也是.. 有没有什么好方法可以解决这个问题，我自然会考虑删除悬停效果，并且周围有一个可点击的菜单，看起来移动设备让你在css中悬停，有点老了，我也看了一下：焦点，并且：活跃，但不被认为是活跃的.. 积极的方式去这里，在这种情况下，我是否必须在我的菜单项目中实现这一点？

var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","display: inline");

像这样的东西可能就是我想要的东西，我会稍微试验一下，看看它是怎么回事，但是对于未来的最佳实践的一些指示将非常感激：）

我需要cookie来实现这一点吗？

4 个答案: