Implementing CSS styles dynamically using JavaScript

I was working on a chrome extension that displays icons on a blank tab using JavaScript. Here are the relevant code snippets:

HTML:

<div id="icons" class="icons"></div>

Javascript:

function addIcons() {
  for (var i = 0; i < iconArray.length; i++) {
    var link = document.createElement('a');
    link.href = linkArray[i];

    var icon = document.createElement('img');
    icon.src = "images/" + iconArray[i];
    icon.title = titleArray[i];

    link.appendChild(icon);
    document.getElementById('icons').appendChild(link);
  }
  document.getElementById('icons').style.borderBottom="2px solid blue";
}

The issue I'm facing is that the border is displaying above the icons instead of below them. Can anyone provide guidance on how to achieve the desired layout?

javascripthtmlcss

Answer №1

I tested out the code you provided, and it performed flawlessly.

Here's a snapshot for reference: , using the latest version of Chrome.

Have you ensured that the rest of your webpage has valid HTML markup? There may be an issue with it.

Additionally, it is advisable to refrain from setting CSS styles via JavaScript.

<div id="icons" class="icons" style="border-bottom: 2px solid blue"></div>

You can instead use CSS style tags in a separate file:

<style>
.icons { border-bottom: 2px solid blue }
</style>

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

How can I embed input tag with the data-plugin attribute into a DOM element?

Can anyone help me with adding a data-plugin attribute to the "el" element using JavaScript? HTML <input type="text" data-plugin="datepicker" class="form-control" > JavaScript // Creating an input element var cellRight = row.insertCell(1); var ...

javascripthtml

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

Unable to retrieve a value from an Angular EventEmitter

Is there a way to retrieve the result of a method call between components using an EventEmitter? While I understand that there are more efficient methods such as calling the method from a service directly, my situation requires me to utilize the base compo ...

javascriptangularrxjsobservable

Is there a way to insert a colored square into a <button> tag rather than text?

Looking for help with the following HTML: <button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button> <button name="black" onclick="setThemeColor(this.name)">Black</button> I'm interested in replacing the text on ...

htmlcss

Tips for obtaining response headers

Currently, I am utilizing Angular version 15.0 and retrieving a list of items from the backend (ASP.NET Core 5) with an additional item attached to the header. The GET method in the client-side service is as follows: /** GET Paged commodities from the s ...

javascriptangulartypescript

What steps can I take to ensure my code runs smoothly from a USB across all devices?

My code for a concept website is stored on a USB stick, but I'm facing a problem with my buttons being anchored to a G: drive on Windows. However, when I use a Chromebook, the USB stick is recognized as removable media and not a G: drive, causing the ...

javascripthtmlwindowschromebook

Website Navigation: A guide to organizing columns and rows for optimal user experience

Just reaching out with a question regarding my coding process. Currently, I am in the midst of translating the website's navigation design into code. The attached image showcases the navigation layout consisting of 10 rows and 8 columns. Below is a s ...

htmlcsshtml-tablenavigation

Using PHP to create custom HTML email templates and sending them out via

I have successfully used phpmailer to send normal pre-defined emails. Now, I am looking to enhance the email format by connecting my text editor with a PHP script to send HTML emails. The text editor is a template from CKEditor. https://i.stack.imgur.com/v ...

phphtmlemailpostiframe

What is the best way to make grid-column-start and span work seamlessly together?

I'm having some trouble with creating a table using the grid function in CSS. Specifically, I am stuck on how to add dynamic categories at the top without hardcoding styles for each category count. I have tried using the grid-column-start property to ...

htmlcssgrid-layoutcss-grid

Angular's two-way binding feature does not seem to be updating the value for date

In my Angular - Dotnetcore 2.0 form, users are required to update their demographic information including their birth date. Initially, I was using the following code snippet to display the birthdate: <input id="dateOfBirth" type="date" class="form-cont ...

htmlangular.net-core

Observing the state object in Pinia does not trigger when the object undergoes changes

I am facing an issue with setting a watcher on a deeply nested object in my Pinia state. export const useProductStore = defineStore("product", { state: () => ({ attributes: {}, }), }); When the object has data inside it, it looks something like ...

javascriptvue.jsvuejs3vue-composition-apipinia

Protractor is unable to locate the button associated with $ctrl in ng-click

I'm having trouble locating buttons that contain the $ctrl part using Protractor. Here's an example of a button: <button class="btn btn-primary ng-scope" ng-click="$ctrl.openProfileModal()" ng-if="$ctrl.admin &amp;&amp; $ctrl.networkI ...

cssangularjsseleniumxpathprotractor

Ways to toggle the visibility of HTML table rows periodically

I've been working with HTML tables, where I created a dynamic table split into four columns for display. Now, my task is to show 5 rows at a time on the screen using CSS. To achieve this, I'm populating the table in one go and refreshing the cont ...

javascriptjquerycsshtml-table

Blazor, the Razor Library, npm, and webpack are essential tools for front

Let me try to explain this clearly. I have a Blazor WebAssembly (WASM) project that is referencing a Razor library without any issues. The Razor library successfully compiles a JavaScript bundle using webpack. One of the components I am attempting to creat ...

javascriptnpmwebpackrazorblazor-webassembly

How can I import the raw JSON data from a table into a pandas DataFrame?

I am attempting to extract the JSON data and convert it into a dataframe from: "" , which is the original data displayed in a table at the bottom of this page "" The content on the JSON page seems to be basic JSON data like"[{\"SECURITYCODE\":& ...

pythonhtmljsonpandasdataframe

What could be causing the concave walls in my ray casting engine when applying fisheye correction?

As I work on creating a ray casting engine using HTML Canvas, I encountered the fisheye effect issue. Most online resources suggest multiplying the ray's length by the cosine of its angle from the player to correct this problem. distance * Math.cos( ...

javascripthtmlcanvasraycasting

The process of importing data from a separate file in Javascript/React

I had an idea to create something like this: export default () => { return [ { text: 'Full-time', value: 'fulltime', key: 'fulltime' }, { text: &a ...

javascriptreactjs

Adding extra space on a Bootstrap 4 flex container with full height

I need help creating a fixed div with 100% height and vertically centered alignment using Bootstrap 4. I've achieved everything except adding padding. When I try to add padding to the child div, the content overflows off the screen. I even attempted ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

A guide on resolving the Bootstrap Carousel flickering effect on iPhones when transitioning between items. Check out the video demonstration for a clear illustration

I'm currently troubleshooting an issue with a website that features two carousels specifically designed for mobile screen sizes. The functionality works flawlessly on all devices except for certain models of iPhones. Unfortunately, I am unable to debu ...

htmljqueryiphonecarouselflicker

The network A-frame with either nav-mesh or collision is malfunctioning; it seems that only one of them is operational at a time,

I have a camera attached to a head template and also added this camera inside a rig. The rig is constrained to a nav-mesh, but I am facing an issue where only one of the controls seems to be working - either the movement control of the rig or the WASD cont ...

javascriptthree.jsaframemultiplayer