使用 JavaScript 更改边框颜色，并从 Javascript 保存 Cookie

Change border color using JavaScript and save Cookie from Javascript

本文关键字：并从 Javascript 保存 Cookie 颜色 JavaScript 边框 使用      更新时间：2023-09-26

我使用一些JavaScript来更改HTML中某些div的颜色，并且有两个问题。第一个是我有一个 CSS 三角形，我需要在点击事件时更改边框颜色，但不适用于下一个代码： 

document.getElementById('triangle').style.borderLeft = color;

有人知道吗？

下一个问题是下一个问题：一旦颜色被改变，我想将其保存为cookie，并在访问者下次访问时加载它。这是我目前的JavaScript：

function change(color)
{
    document.getElementById('tinybox1').style.backgroundColor = color;
    document.getElementById('tinybox2').style.backgroundColor = color;
    document.getElementById('tinybox3').style.backgroundColor = color;
    document.getElementById('tinybox4').style.backgroundColor = color;
    document.getElementById('text').style.backgroundColor = color;
    document.getElementById('pinnable').style.backgroundColor = color;
    // document.getElementById('triangle').style.borderLeft = color;
}

希望有人能帮帮我！

若要仅更改边框颜色而不必同时指定大小和类型，请使用：

element.style.borderLeftColor = "#000";

对于第一个问题@VisioN请使用这样的答案：

var color = "#000";
document.getElementById('triangle').style.borderLeft = "1px solid " + color;

对于第二个关于cookie，请尝试这样做（假设你想使用简单的javascript）将其保存为cookie.js并将其导入到您的html中：

function createCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date( );
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
    }
    else expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) 
{
    var nameEQ = name + "=";
    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, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
function eraseCookie( name) 
{
    createCookie(name,"",-1);
}

现在，要创建 Cookie，请执行以下操作：

createCookie('cookiename', 'cookievalue', false);

要评估 Cookie，请执行以下操作：

 var cookie = readCookie('cookiename');
 // var cookie will be null if there is no cookie to read.
 if(cookie == 'cookievalue'){
   //do something
 }

希望这有帮助。

对于到目前为止的第一个问题，可以这样做：

var color = "#000";
document.getElementById('triangle').style.borderLeft = "1px solid " + color;

或者结合一些风格。

.CSS：

#triangle {
    ...
    border-left-width: 1px;
    border-style: solid;
}​

.JS：

var color = "#000";
document.getElementById('triangle').style.borderLeftColor = color;
相关文章：