Save ID in variable and add style to it

Related searches

I want to highlight randomly a word which is inside a <p> tag with the id=JShighlight. It should blink one time and then another randomly chosen word should blink.** I can't add the css style needed to the ID.

The words are nested in a span with an unique id like id="one" oder id="two". Like:

<p id="JShighlight"> <span id="one">Lorem </span><span id="two">Ipsum </span><span id="three">Dolores</span></p>

To chose a word randomly, I build an array with the child-nodes of JShighlight. And call it childNodeArray

let childNodeArray = document.getElementById('JShighlight').children;

Then I randomly chose an index:

  let i = Math.floor(Math.random() * childNodeArray.length);

The variable name saves the randomly chosen ID.

let name = childNodeArray[i].id;

To this randomly chosen word /Id I want to add a certain style so that this word blinks one time. I tried:


(.blinking is the css-class:

.blinking {
    animation: blinkingText 0.6s 1;
    /* animation-iteration-count: 1; */


But it does not work. What "works" is:

document.getElementById(name).style.color = "red";

Why can I pass a variable as an argument in the latter case and not in the former case? How can I append a css class to an variable ID?

Instead of

let name = childNodeArray[i].id;


let name = childNodeArray[i];

Hope your issue will be resolved;

Using CSS custom properties (variables), Custom properties (sometimes referred to as CSS variables or cascading We'll apply it to this HTML: Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

In the first case, name is a string not an element. what you can do is:

name = document.getElementById(name);
name.classList.add("blinking");, The style property is used to get as well as set the inline style of an For adding specific styles to an element without altering other style style="font-weight:bold; "> <div style="color:red" id="myElement">. var out = ""; var elementStyle =; var computedStyle Can I keep track of my report? Definition and Usage. The id property sets or returns the id of an element (the value of an element's id attribute). An ID should be unique within a page, and is often used to return the element using the document.getElementById() method.

use Array.from to convert children DOM list to array of DOM elements. Also remove the id attribute before storing the name refer variable.

Please update the below lines.

let childNodeArray = Array.from(document.getElementById('JShighlight').children);
let i = Math.floor(Math.random() * childNodeArray.length);
let name = childNodeArray[i];

Everything you need to know about CSS Variables, Preprocessors like Sass sell the use of variables as a big add-on. I'll show how easy CSS variables make creating site-wide theme styles. If you have all your constants saved in a separate file, you don't have to jump through thousands of lines of code The div with the ID of alert will NOT be green. First, make your markup more portable/reusable. I also set the button's type to 'button' instead of using the onsubmit attribute. You can toggle the type attribute to submit if the form needs to interact with a server.

Dynamic style - manipulating CSS with JavaScript, are a few special considerations to keep in mind when working with the CSS DOM. If your style elements have id attributes, you can reference them quickly with You can also add new style sheets to the page — you can use the document. first get the style sheet's parent — var sheetParent = sheetToBeRemoved. I'm trying to modify a CSS style attribute for a div based on the information I get from a database table in the code behind of my aspx page. The following is essentially what I am trying to do, but I get errors.

CSS Variables With Inline Styles, Adding on that, it's possibe to use a CSS variable inside an inline <button class ="c-button c-button--ghost" style="--color: #5e35b1;">Save´┐Ż Of these two choices, if you have the ability to modify your CSS, I would prefer you go style elements by adding and removing classes. The simple reason is that this approach is far more maintainable. It is much easier to add and remove style properties from a style rule in CSS as opposed to adding and removing lines of JavaScript.

I am sorry, there is one more question I face, which is user must login in order to use the app. When user login, the user can click the item and when he or she click the add button, it will add all the product details to table B from table A which include product details a well as the user id which corresponding to the user account log in, do you know how to get the user id?