how to get dynamically created elements width and apply style to that?
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , I am creating an li element dynamically like this: $(data).find('slide').each(function(numSlide){
var slideLink = $(this).attr('link');
var slideimage = $(this).children('slideimage').text();
var slidedesc = $(this).children('slidedesc').text();
var li = $('<li><a href="'+slideLink+'"><img src="'+root+"images/top-slider-image/"+slideimage+'" alt="welcome to Burger Davis Blog" /></a><div class="note">'+slidedesc+'</div></li>');
$('.slider ul').append(li);
var w = li.outerWidth();
li.css('width', w + 100);
})
|
JQuery Mobile: Style dynamically created elements
Date : March 29 2020, 07:55 AM
this will help You can invoke button widget on the dynamically created element to appear as JQM button widget using .button() var mapbutton = '<a class="mapbtn" rel="external" data-role="button" href="map.html?longlat=' + coords + ' ">Map</a>';
$('.event').append($(mapbutton).button());
var input = '<a href="#" data-role="button" class="save_event">Save to Planner</a>';
$('.event').append($(input).button());
|
How to apply style sheets to dynamically created elements?
Date : March 29 2020, 07:55 AM
Hope that helps It is not dynamically created issue. It is because you haven't set the class to table. As Bootstrap Docs says: You have to use and for the class to work.var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);
$("tr:first-child").wrap("<thead/>");
var table = document.createElement("table");
table.setAttribute("id","table");
var headRow = document.createElement("tr");
var dataRow = document.createElement("tr");
var head = document.createElement("th");
var data = document.createElement("td");
var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);
head.innerHTML="head";
data.innerHTML="data";
headRow.appendChild(head);
dataRow.appendChild(data);
table.appendChild(thead);
table.appendChild(tbody);
console.log(document.styleSheets);
table.className = "table";
document.getElementById("test").appendChild(table);
How can I style dynamically created elements within an iframe?
Date : March 29 2020, 07:55 AM
With these it helps You can't style the contents of the iframe if the page does not have same domain as your parent. This is to prevent XSS.
|
How to style dynamically created elements with CSS
Date : March 29 2020, 07:55 AM
wish of those help You can make a class and add that class to created elemets. Example: for (k = 1; k < 11; k++) {
let div = document.createElement("div");
div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");
div.className = 'custom-class';
div.innerHTML = "0"
document.getElementById("container3").appendChild(div)
}
.custom-class {
background : red;
color: white;
width : 20px;
height : 20px;
margin-top :2px;
text-align : center;
border : 1px solid black;
}
<div id="container3"></div>
|
|
Boards Message :
Related QUESTIONS :