UserScript:background-color
CSSで背景色を変更するだけのシンプルなユーティリティ。
script.jsscrapbox.PageMenu.addItem({
title: 'background-color',
onClick: (e) => {
let style = document.getElementById('__col__')
if (style)
{
//console.log(style)
style.remove()
e.currentTarget.innerText = 'background-color'
return
}
const bgcolor = prompt("背景色")
if (bgcolor === undefined || bgcolor === null) {
e.currentTarget.innerText = 'background-color'
return
} else {
e.currentTarget.innerText = '✅background-color'
}
//console.log(bgcolor)
const css =
'body {'
+ ' background-color: ' + bgcolor +';'
+ '}'
//console.log(css)
style = document.createElement('style')
style.setAttribute('id', '__col__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})script.jsscrapbox.PageMenu.addItem({
title: '色変更テスト',
onClick: () => {
//const color='MistyRose'
const color = prompt("変更したい色を入力してください")
if (color === undefined || color === null) {
return
}
//const styles = getComputedStyle(document.documentElement)
//const styles = getComputedStyle(document.body);
//console.log(styles)
//const htmlStyle = document.documentElement.computedStyleMap();
// スタイルのうちカスタムプロパティのみ表示
//for (const [propertyName, value] of htmlStyle.entries()) {
// if (/^--/.test(propertyName)) {
// // valueはCSSStyleValueとして得られるので文字列に変換
// console.log(propertyName, value.toString());
// }
//}
// カスタムプロパティの値を取得
//const v = String(style.getPropertyValue('background-color')).trim()
//console.log(v)
// カスタムプロパティの値を取得（できた）
//const value = String(styles.getPropertyValue('--bg')).trim()
//var value = styles.getPropertyValue('--back-color')
//console.log(value)
// カスタムプロパティの値をセット（できる）
//document.documentElement.style.setProperty('--back-color', color)
document.documentElement.style.setProperty('--page-color', color)
}
})style.css:root {
--dummy: White;
--back-color: WhiteSmoke;
/*--page-color: White;*/
--page-color: MistyRose;
}
body {
/* 背景色 */
background-color: var(--back-color);
}
.page {
/* ページ色 */
background-color: var(--page-color);
}
.grid li.page-list-item a .header{
background-color: var(--page-color);
}
.grid li.two-two.page-list-item a .title {
background-color: var(--page-color);
}
.grid li.page-list-item a .content{
background-color: var(--page-color);
}