Tips for modifying the height of a div using cssText with a JavaScript variable

let height = Math.floor((Math.random()*100)+50);
document.getElementById("child").style.cssText="background-color: red; height: " + height + "px; width: 100px;";

Answer №1

To achieve the desired result, you can use string concatenation or Template literals. Additionally, ensure that the element has the style attribute set to display:block;

String Concatenation Example

var randomHeight = Math.floor((Math.random()*100)+50);
document.getElementById("child").style.cssText="display:block;background-color:red; height:"+randomHeight+"px; width:100px;";
<span id="child">ABC</span>

Template literals Example

var randomHeight = Math.floor((Math.random()*100)+50);
document.getElementById("child1").style.cssText=`display:block;background-color:red; height:${randomHeight}px; width:100px;`;
<span id="child1">Def</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a list using only distinct elements from an array?

If I have a collection of different colors: Red Blue Blue Green I aim to extract only the unique colors and store them in an array. Subsequently, I plan to incorporate each color from that array into an existing color list. The desired outcome would l ...

Tips for passing down CSS styles through Less stylesheets

In an effort to create a legend below a <table> that matches the colors defined in Bootstrap stylesheets, I am struggling with the following: .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot ...

Learn the process of invoking componentDidMount each time you switch between ListItems in React

After initializing the widget component to load various charts, it works correctly. However, when switching to another ListItem, the componentDidMount does not load the required data. This data is essential for the component to function properly. I noticed ...

Is there a more straightforward method than using a recursive function to serialize a JavaScript object for an AJAX request?

Check out this function and helper I created for serializing a javascript object to send in an ajax request. While there may be more efficient solutions in libraries like jQuery, I couldn't find one specifically for a javascript object. /* @author Be ...

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

Updating React Native using setState is not possible

In my React Native application, there is a function that deletes an item: delete(index){ this.setState({deletedIndex:index, cachedCart:this.state.Cart, Cart: this.state.Cart.splice(index,1) }, function(){ console.log(th ...

Splitting a Multidimensional Array in JavaScript into Two Separate Arrays

I received an array from an ajax call (data) that I need to split into two parts: An alert showing the data reveals: [[200326,150000],[200327,150000],[200328,150000],[200329,150000],[200330,160000],[200331,320000]] I attempted to extract the dates (fi ...

Closing the space between navigation bar choices

I'm currently working on my website's navbar menu and struggling to eliminate the gap between each of the navbar links. It seems that the li attributes with the class dropdown are slightly wider than the rest of the links, causing this issue. I&a ...

Having trouble with getting the second JavaScript function to function properly?

I am facing an issue with the second JavaScript function. When I click the 'Send Mail' button, it should call the second function and pass it two values. However, the href line (second last line in the first function) is not rendering correctly. ...

What is the best way to save an AJAX success variable as a variable that is accessible outside of

After using AJAX to retrieve data as myPubscore, I encountered an issue when trying to pass myPubscore to another js file. While myPubscore printed correctly in Ajax, I faced a "ReferenceError" when attempting to print it just before sendResponse. How can ...

Having trouble getting the Vue.js framework to function properly on a basic HTML page with a CDN implementation

I recently delved into learning vue.js and decided to focus on forms. However, when I tried to open the file using a live server or XAMPP, it didn't work as expected. It had worked fine before, but now I seem to be encountering some issues. Could anyo ...

Show a plethora of images using the express framework

I have two closely related questions that I am hoping to ask together. Is there a way for express (such as nodejs express) to handle all requests in the same manner, similar to how http treats requests with code like this: pathname = url.parse(request.url ...

XHR object encountered a 404 error while attempting a GET request with an unknown URI component name

Currently, I am attempting to design a text box that triggers a server query as soon as a character is entered into it. However, I am encountering an error message that is puzzling me: Traceback (most recent call last): File "/Users/sahandzarrinkoub/Do ...

How can you convert Promise.all to a single Promise?

I have successfully implemented two API calls using Promise.all method with no issues. Even though one API call is sufficient to retrieve the results, I decided to stick with Promise.all and it's still working fine. I attempted to replace Promise.al ...

Client-side validation with Jquery is failing to function properly

Currently, I am experimenting with the jquery.validate.unobtrusive.js plugin to dynamically generate form fields. Here is an example of how I'm creating a textarea field: var message = $("<textarea id='test'></textarea>"); $(mes ...

Implementing dual language codes for a single locale in internationalization (i18n) efforts

I am currently using i18n to display translations in English and Japanese. The default language is set to English with the code en, but I have recently discovered that my website is not utilizing the correct ISO language code for Japanese, which should be ...

Create a simulated constructor to generate an error

Currently, I am faced with a challenge of writing a test that is expected to fail when trying to instantiate the S3Client object. It seems like Vitest (similar to Jest) replaces the constructor with its own version when mocked, preventing my original const ...

Ways to execute a function when a button is clicked with a shared variable?

When creating buttons in HTML to control video speed, I encountered a strange issue. After successfully implementing the buttons for one video, they only worked on a second video and had no impact on the first one. Deleting the second video seemed to resol ...

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow. My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynam ...

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...