मैंने अपने ब्लॉग पर बटन क्लिक करके कुछ divs की शैली बदलने का विकल्प दिया है (प्रकाश, अंधेरे और डिफ़ॉल्ट विषय के लिए)। बेहतर होने के लिए, मुझे जरूरत है कि जब आगंतुक किसी एक को चुनता है, तो वह शैली स्थानीय स्टोरेज में सहेजी जाती है, लेकिन मुझे नहीं पता कि यह कैसे करना है। मैंने इंटरनेट पर उदाहरण देखकर बहुत कोशिश की है लेकिन कोई भी मेरे मामले में फिट नहीं हुआ और मैं हार गया। यहाँ मेरा कोड है:

ऑनक्लिक फ़ंक्शन वाले बॉटन्स:

<button onClick="lightTheme()" class="button light">Light</button>
<button onClick="grayTheme()" class="button default">Default</button>
<button onClick="darkTheme()" class="button dark">Dark</button>

मेरा पूरा जावास्क्रिप्ट:

  function lightTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#EEE";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#111";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#AAA";
  ele[i].style.color = "#111";
  }
}

function darkTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#222";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#fff";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#";
  ele[i].style.color = "#EEE";
  }
}

function grayTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#777";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#fff";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#555";
  }
}

...और अगर मदद करता है:

HTML पर मेरे div:

<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">1</span></p></div>
<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">2</span></p></div>
<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">3</span></p></div>

सीएसएस (केवल डेमो के लिए):

.picArea {
    border: 1px solid #000;
    background: #777;
    padding: 5px;
    margin: 5px 0;
}
.picTitle {
    font-size: 150%;
    margin: 0;
    color: #fff;
}
.picNumber {
    padding: 0 7px;
    background: #555;
    border-radius: 50%;
    margin-left: 10px;
    color: #ccc;
    font-size: 80%;
}
.button {
    width: 75px;
    height: 50px;
    border-radius: 50%;
    border: none;
}
.button.light {
    background: #ccc;
    color: #000;
}
.button.dark {
    background: #000;
    color: #fff;
}
.button.default {
    background: #777;
    color: #fff;
}

पूर्वावलोकन: https://i.stack.imgur.com/ncneS.jpg

1
Kenya JJ 28 मार्च 2018, 23:32

1 उत्तर

ठीक है, आप इसे ब्राउज़र में स्थानीय रूप से करना चाहेंगे। आप शैली की जानकारी को कब तक सहेजना पसंद करते हैं? यदि उपयोगकर्ता पृष्ठ को पुनः लोड करता है तो मुझे लगता है कि आप चयनित शैली को रखना चाहेंगे। यदि उपयोगकर्ता ब्राउज़र को बंद कर रहा है तो इसे फिर से खोलें, आपकी साइट पर जाकर, आप क्या व्यवहार चाहते हैं?

0
user2285973 28 मार्च 2018, 20:45