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

Out of nowhere, JavaScript/jQuery ceased to function

Harness the power of ng-click in conjunction with data-ng-href for a

Listening for server updates with jQuery

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

Learn the steps for accessing and utilizing aria-label text in Google Chrome

The command to create a new Next.js app using npx, "<project-name>", is currently not functioning as

No matter how tall I make it, the scroll bar just won't stop showing

Using more than one submit button in an HTML form

Accessing the background page of a Chrome extension while it's in operation

The error "Unable to create an instance of mssql.Schema" indicates that the

The essential criteria for script tag and page validation requirements

Establish a connection between a single EC2 instance running a Node.js application and another EC2 instance acting as a PostgreSQL

retaining the scroll position of a window when refreshing a div

Hiding a div becomes impossible once it has been set to display:block

Issue with AngularJS $http not responding to ng-click after first call

Running two different versions of the same React-App concurrently: A step-by-step guide

Problem with flags series in Highcharts/Highstock

Protractor - Error: prop is undefined

The table headers in the second table do not match the queryAllSelector

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera