Utilizing Node and Electron to dynamically adjust CSS style properties

Question

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use

document.getElementsByClassName()

won't work because Node doesn't have document. The goal is to change the color of a specific div when the q key is pressed. Below is the code snippet:

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;
}

Edit

Following some changes suggested by Gr8Miller (yet still no luck): 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>

And 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...");
}

javascript css node.js electron

Answer 1

Answer №1

Similar question can be found at this link.

To resolve this issue, consider creating a new JavaScript file with your code and then load it as a script in your HTML document.

You can add the following line to your index.html:

<script type="text/javascript" charset="utf8" src="./pageScript.js"></script>

Next, create a separate pageScript.js file where you can include your code like this:

window.onload = function () {
    // Your code goes here
    function leftLight() {
        var element = ;
        element.style["background-color"] = "yellow";
    }

    // Make sure to call the function
    leftLight();
}

Answer 2

Similar question can be found at this link.

To resolve this issue, consider creating a new JavaScript file with your code and then load it as a script in your HTML document.

You can add the following line to your index.html:

<script type="text/javascript" charset="utf8" src="./pageScript.js"></script>

Next, create a separate pageScript.js file where you can include your code like this:

window.onload = function () {
    // Your code goes here
    function leftLight() {
        var element = ;
        element.style["background-color"] = "yellow";
    }

    // Make sure to call the function
    leftLight();
}

Answer 3

Answer №2

Handling of view related tasks in Electron:

When working with Electron, it's important to understand that the entry JavaScript file (such as index.js) runs in the main process, acting as the manager for all browser windows it creates. The browser window itself runs in the render process where HTML elements and imported/embedded JavaScript code are executed. This means that the document object can only be directly accessed in the render process.

In scenarios like yours, where style changes need to be applied dynamically, it is best practice to perform these tasks in the render process:

Send a message (e.g. key-pressed-q) from the main process to the render process when a specific key (like q) is pressed:
Update the style in the render process upon receiving the message (key-pressed-q):

index.js

    mainWindow = new BrowserWindow({
        backgroundColor: '#000000', 
        fullscreen : true, 
        frame : false, 
        webPreferences: {
            nodeIntegration: true
        }});
    ...
    function leftLight() {
        mainWindow && mainWindow.webContents.send('key-pressed-q');
    }

index.html

    ...
    <script type="text/javascript">
    var ipc = require('electron').ipcRenderer;
    ipc.on('key-pressed-q', (e) => {
        console.log(e);
        var element = document.querySelector(".rect_green");
        element.style.backgroundColor = "yellow";
    });
    </script>
    ...

Updated on 2019-11-18

Aside from Electron-specific considerations, there are also other errors in your code related to basic HTML principles:

//var element =  document.getElementsByClassName("rect_green");
//element.style["background-color"] = "yellow";

The function getElementsByClassName returns an array of Elements, not a single Element. Additionally, the correct property for setting background color is backgroundColor, not background-color.

Furthermore, keep in mind that the console.log statements in the render process will not output logs to the main process's console. To view these logs, you'll need to open the DevTools of the browser window hosting the render process.

  // in your `index.js`

  // Open the DevTools.
  mainWindow.webContents.openDevTools(); // `console.log` in `index.html` will be shown in its own console.

  // in your `index.html`

var ipc = require('electron').ipcRenderer;
ipc.on('key-pressed-q', (e) => {
  var element = document.querySelector(".rect_green");
  element.style.backgroundColor = "yellow";
  console.log("q pressed in html file");   // this log won't appear in the main process's console.
});

Answer 4

Handling of view related tasks in Electron:

When working with Electron, it's important to understand that the entry JavaScript file (such as index.js) runs in the main process, acting as the manager for all browser windows it creates. The browser window itself runs in the render process where HTML elements and imported/embedded JavaScript code are executed. This means that the document object can only be directly accessed in the render process.

In scenarios like yours, where style changes need to be applied dynamically, it is best practice to perform these tasks in the render process:

Send a message (e.g. key-pressed-q) from the main process to the render process when a specific key (like q) is pressed:
Update the style in the render process upon receiving the message (key-pressed-q):

index.js

    mainWindow = new BrowserWindow({
        backgroundColor: '#000000', 
        fullscreen : true, 
        frame : false, 
        webPreferences: {
            nodeIntegration: true
        }});
    ...
    function leftLight() {
        mainWindow && mainWindow.webContents.send('key-pressed-q');
    }

index.html

    ...
    <script type="text/javascript">
    var ipc = require('electron').ipcRenderer;
    ipc.on('key-pressed-q', (e) => {
        console.log(e);
        var element = document.querySelector(".rect_green");
        element.style.backgroundColor = "yellow";
    });
    </script>
    ...

Updated on 2019-11-18

Aside from Electron-specific considerations, there are also other errors in your code related to basic HTML principles:

//var element =  document.getElementsByClassName("rect_green");
//element.style["background-color"] = "yellow";

The function getElementsByClassName returns an array of Elements, not a single Element. Additionally, the correct property for setting background color is backgroundColor, not background-color.

Furthermore, keep in mind that the console.log statements in the render process will not output logs to the main process's console. To view these logs, you'll need to open the DevTools of the browser window hosting the render process.

  // in your `index.js`

  // Open the DevTools.
  mainWindow.webContents.openDevTools(); // `console.log` in `index.html` will be shown in its own console.

  // in your `index.html`

var ipc = require('electron').ipcRenderer;
ipc.on('key-pressed-q', (e) => {
  var element = document.querySelector(".rect_green");
  element.style.backgroundColor = "yellow";
  console.log("q pressed in html file");   // this log won't appear in the main process's console.
});

Answer 5

Answer №3

Revise your index.html with the following changes :

<!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>
    <script>
      function leftLight() {
        const element = document.getElementsByClassName("yourclassname")
        element[0].style.color = "red"
      }
      window.onkeydown = function(e) {
        if (e.key == "q") {
          leftLight()
        }
      }
    </script>
</body>
</html>

Answer 6

Revise your index.html with the following changes :

<!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>
    <script>
      function leftLight() {
        const element = document.getElementsByClassName("yourclassname")
        element[0].style.color = "red"
      }
      window.onkeydown = function(e) {
        if (e.key == "q") {
          leftLight()
        }
      }
    </script>
</body>
</html>

Utilizing Node and Electron to dynamically adjust CSS style properties

Answer №1

Answer №2

Answer №3

Similar questions

Get selectize.js to display only options that begin with the user's input

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Error: Node.js Selenium Unexpected Identifier - Syntax Issue

Encountering 'undefined' issue with find operation in mongoDB

Inability to update Vue.js component data even after a successful GET request

Configuring the Port for NodeJS Express App on Heroku

What is the proper way to implement parameters and dependency injection within a service?

AngularJS: Monitoring $locationChangeStart for token verification

Utilize both a model and a boolean variable within expressionProperties in Formly configuration

CSS: Concealing a separate div

Are you ready to put Jest to the test by checking the completion event of

The alignment of the timeline in HTML CSS becomes distorted once it reaches the fourth element

Is there a way to restrict Maven executions to only affect the build folder?

Displaying an IP camera feed on a three.js canvas

Preserve identical elements within an array

What causes the Vuetify checkbox to trigger twice when clicked in a Vue.js application?

How can I create a circular Datepicker in JavaFX?

NodeJS Query String failing to yield desired outcome

Can streaming an HTTP response cause interference with Node.js processing?

Update an array while monitoring for a specific event