javascript - 如何使用 Node 和 Electron 动态更改 CSS 样式属性
问题描述
我遇到了以下问题:我想访问styles.css
Electron 内部的 css 属性。问题是我无法使用document.getElementsByClassName()
,因为document
Node 中没有。q
所需的行为是在按下键后更改一个 div 的颜色。这是我的代码:
index.js
const url = require('url');
const path = require('path');
const {app, BrowserWindow, globalShortcut} = require('electron');
let mainWindow;
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({backgroundColor: '#000000', fullscreen : true, frame : false});
// Load html in window
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes:true
}))
globalShortcut.register('Esc', () => {
app.quit();
});
globalShortcut.register('q', () => {
leftLight();
});
});
//This doesn't work
function leftLight() {
var element = ;
element.style["background-color"] = "yellow";
}
index.html
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class = rect_green> <h2 class=blocktext >LEFT FENCER</h2></div>
<div class = rect_red><h2 class=blocktext> RIGHT FENCER</h2> </div>
<div class = crono> <h2 class=blocktext>3:00</h2></div>
</body>
</html>
styles.css
.rect_green {
display: flex;
align-items: center;
height: 400px;
width:60%;
background-color: green;
position:relative;
top:100px;
text-align: center;
}
.rect_red {
display: flex;
align-items: center;
height:400px;
width:60%;
background-color: red;
position:relative;
top:120px;
float:right;
}
.crono {
display: flex;
align-items: center;
height:300px;
width:40%;
background-color: beige;
position:fixed;
left: 50%;
bottom : 50px;
transform: translate(-50%, 0px);
margin: 0 auto;
}
.blocktext {
margin-left: auto;
margin-right: auto;
font-family: "Palatino", Times, serif;
font-size: 180px;
}
编辑
在 Gr8Miller 建议的修改之后(仍然没有通信):
index.html
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class = rect_green> <h2 class=blocktext >LEFT FENCER</h2></div>
<div class = rect_red><h2 class=blocktext> RIGHT FENCER</h2> </div>
<div class = crono> <h2 class=blocktext>3:00</h2></div>
</body>
<script type="text/javascript">
var ipc = require('electron').ipcRenderer;
ipc.on('key-pressed-q', (e) => {
//var element = document.getElementsByClassName("rect_green");
//element.style["background-color"] = "yellow";
console.log("q pressed in html file");
});
</script>
</html>
和index.js
const url = require('url');
const path = require('path');
const {app, BrowserWindow, globalShortcut, ipcMain, webContents} = require('electron');
let mainWindow;
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({
backgroundColor: '#000000',
fullscreen : true,
frame : false,
icon : __dirname + "/res/icon.jpg",
webPreferences: {
nodeIntegration : true
}
});
// Load html in window
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes:true
}))
globalShortcut.register('Esc', () => {
app.quit();
});
globalShortcut.register('q', () => {
leftLight();
});
});
function leftLight() {
mainWindow && mainWindow.webContents.send('key-pressed-q');
console.log("Sending q pressed to html...");
}
解决方案
可能与此重复。
尝试创建另一个包含您的代码的 js 文件并将其作为脚本从您的 html 文档加载。
将此添加到您的 index.html:
<script type="text/javascript" charset="utf8" src="./pageScript.js"></script>
并使用您想要的代码创建一个单独的 pageScript.js 文件:
window.onload = function () {
// your code here
function leftLight() {
var element = ;
element.style["background-color"] = "yellow";
}
// Also don't forget to call the function
leftLight();
}
推荐阅读
- amazon-web-services - 如何在 aws cli describe-instances 输出中获取标签的值?
- javascript - jquery 出现错误,说明“idleTimeout 不是函数”
- javascript - 从 JS 类解析异步值
- loops - 循环通过库存不运行它告诉什么?
- html - Chrome 相关链接 PDF
- python - Python:在元组中过滤
- javascript - 如何在显示 = 块后设置滚动顶部
- makefile - Gnu Make builder和FSL Make builder的区别
- r - 替换矩阵中相互跟随的特定数字
- sql - 如何组合来自两个不同日期范围sql的两个不同计数