Assign a class to a newly created element using JavaScript

I have a unique element that I've created using the code below:

connectedCallback()
{
  var custom_element = document.createElement('Div');
  custom_element.class = 'element demo3';

  this.appendChild(custom_element);

 }

However, upon inspecting the source, I realized that the custom_element's class is not being set to element demo3.

All other modifications seem to work fine, such as 

custom_element.style['background-color'] = 'red'
, etc.

Is it possible to change the CSS class of an element that is appended inside another custom element?

htmlcsscustom-element

Answer №1

Due to historical factors, the className attribute is utilized instead of class:

function connectedCallback () {
  var on_off_switch = document.createElement('div')
  on_off_switch.className = 'switch demo3'

  this.appendChild(on_off_switch)
}

Answer №2

type refers to the category of the component attribute, whereas categoryType indicates its associated property:

toggle_button.categoryType = 'button type2'
// or    
toggle_button.setAttribute('type', 'button type2')

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

Obtain the URL of the chosen file from the input file in an HTML/AngularJS framework

Currently, I am developing a web app in MVC-5 using AngularJS. Below is the structure of the div that I am working on: <div class="row form-clearify" style="margin-top:3px;"> <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:w ...

jqueryhtmlangularjsfile

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

javascripthtmljquerycssmedia-queries

Switching my Bootstrap navbar to a Right-to-Left layout

Currently working on creating a navbar that needs to go from Right to Left for Hebrew language compatibility. Experimenting with a responsive navbar layout where the linked buttons align on the Left and move towards the Right. Want to have the brand logo ...

htmlnavbarbootstrap-4

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

javascriptjqueryhtmlcss

Having trouble with ng-click not correctly updating values within ng-repeat

Here is the code snippet: <div ng-repeat="data in products"> <div class=edit ng-click="dataUI.showEdit = true; content = data;"> </div> <div ng-repeat="renew in data.renewed"> <div class=edit ng-click="dataUI ...

javascripthtmlangularjs

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

Tips for preserving scroll location on Angular components (not the window) when navigating

My current layout setup is like this: https://i.sstatic.net/hOTbe.png In essence <navbar/> <router-outlet/> The issue I'm facing is that the router-outlet has overflow: scroll, making it scrollable (just the outlet section, not the ent ...

javascripthtmlcssnode.jsangular

Steps for generating an HTML button when an Angular function evaluates to true

I am working on a table in HTML that uses ng-repeat to display data. Here is the code snippet for this table: <tbody> <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue | order ...

htmlangularjs

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

What is the best way to add a hyperlink to a specific section using Html.ActionLink in MVC?

Recently, I dove into the world of MVC and came across a puzzling issue. There's this HTML page that smoothly scrolls down to a specific section when you click on its name from the navigation bar. However, now I need to convert this piece of HTML code ...

htmlasp.net-mvc

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

javascriptphphtmlcss

What is the significance of "HandleValidSubmit()" consistently being executed in Blazor?

After reviewing my code, I noticed that the button functionality is not behaving as expected. Specifically, regardless of whether I click the Delete or Submit button, it always triggers HandleValidSubmit() and executes UpdateQuizAsync. This causes an issue ...

htmlblazorwebassembly

Unable to modify variable values in AngularJS

I'm currently utilizing AngularJS along with the "Angular Material" implementation (found here: https://material.angularjs.org/latest/#/) One of the components I'm using is the SideNav component: https://material.angularjs.org/latest/#/demo/mate ...

javascripthtmlangularjs

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

javascripthtmlcss

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

htmlcss

Crafting emails with text and images that adapt seamlessly for viewing in Outlook365, Gmail,

I have a PowerShell script that generates an HTML file named email.html. This file contains inline CSS and base64 encoded images, and it is sent to me daily as part of my website reports. I would like all the content (text/images) in the body of this emai ...

htmlcssoutlookresponsive

PHP Session-Based Language Toggle

I have implemented a simple session switch on my website to make it bilingual. However, there is a flaw - whenever the user switches to the other language, they are redirected back to the index page. I am looking for a solution that allows the user to stay ...

phphtmlsession

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

Is there a way to store a SAFEARRAY (an array of bytes) into an HTML hidden field?

Is there a way to extract an array of bytes from an active-x component, save it in an html-form input hidden field, and then send it to the server using form-submit? I'm not sure how to accomplish this. MIDL: HRESULT Data([out, retval] SAFEARRAY(VAR ...

javascriptc++htmlcomatl