0
346
ViewsCómo hacer que: el fondo de selección y el texto cambien aleatoriamente en función de colores específicos
Estoy tratando de cambiar el :: fondo de selección y el texto de mi sitio web usando JS. Quiero hacer que el fondo de selección y el texto cambien aleatoriamente según los colores que ya elegí. He cambiado el color usando solo CSS, así:
::selection { background-color: #ffce00; color: #000; } ::-moz-selection { background-color: #ffce00; color: #000; } ::-o-selection { background-color: #ffce00; color: #000; } ::-ms-selection { background-color: #ffce00; color: #000; } ::-webkit-selection { background-color: #ffce00; color: #000; }Pero quiero que se cambie el color en cada nueva selección hecha, así:
Agradecería si alguien pudiera ayudar. Gracias.
·
Santiago Trujillo
3 answers
Answer question0
p:nth-child(4n+1)::selection { color: red; } p:nth-child(4n+2)::selection { color: green; } p:nth-child(4n+3)::selection { color: orange; } p:nth-child(4n+4)::selection { color: blue; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>Trate de usar nth-child
·
Santiago Trujillo
Report
0
Podría usar insertAdjacentHTML para sobrescribir el estilo anterior con Javascript:
window.colors = ['#9ACD32','Chocolate','DeepPink','LightSkyBlue','BurlyWood','GreenYellow','Plum','Coral','CornflowerBlue','IndianRed'] window.order = 0 document.addEventListener("mousedown", function() { document.head.insertAdjacentHTML('beforeend', '<style>::selection { background-color:' + window.colors[window.order] + '} ::-moz-selection { background-color:' + window.colors[window.order] + '} ::-o-selection { background-color:' + window.colors[window.order] + '} ::-ms-selection { background-color:' + window.colors[window.order] + '} ::-webkit-selection { background-color:' + window.colors[window.order] + '}</style>'); window.order = window.order + 1 if (window.order > window.colors.length - 1){ window.order = 0 } }); <p>Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. </p> <p>Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. </p>
·
Santiago Trujillo
Report
0
También puede actualizar la variable css a través de Javascript.
let root = document.documentElement; document.querySelector('p').addEventListener("mousedown", e => { const randomColor = Math.floor(Math.random()*16777215).toString(16); root.style.setProperty('--highlight-color', '#'+randomColor); }); :root { --highlight-color: red; } p::selection { background: var(--highlight-color); } <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
·
Santiago Trujillo
Report
Answer question