I am creating a js for an HTML file. I want to manipulate the css of the div.
One of the ways is to use this: -
div.style.left = "30px";
However, in my code user tells how the HTML is to be manipulated. I want to make it dynamic.
I have set a variable with the property I want to change like this: -
let myProperty = "top", value = "30px";
Now, I want to use this as my CSS modifier in js like this: -
myDiv.style.myProperty = value;
I have tried setAttributes() which is not working. How can I do this?
You have to use square brackets to access an object property using a variable.
For example:
let myProperty = "top", value = "30px";
myDiv.style[myProperty] = value;
In your style.css create two different styles with different class names.
In your HTML use the default styling.
In your JS:
const someHTMLTag = document.getElementById("demo")
if(condition) {
someHTMLTag.className = firstStyle
} else {
someHTMLTag.className = secondStyle
}
I don't have enough reputation to add a comment to get more information, but here's my attempt at providing you with an answer to what you have written in your original question.
You could provide the div with a class or id in the HTML (<div id="idName">...</div>) and have the js file access it via the DOM.
var myDiv = document.getElementById("idName");
myDiv.setAttribute("class", "className");
Or
var myDiv = document.getElementById("idName");
myDiv.style.value = "30px";
Related
I want to change some styles of my 'text' variable but somehow can't.
const bg = document.querySelector(".bg");
const text = document.querySelector('.loading-text');
let count = 0;
let interval = setInterval(blurr,30);
function blurr() {
if(count>99) {
clearInterval(interval);
}
text.innerHTML = `${count}%`;
text.style //here is the problem
count++;
};
Im new here, and new to javascript so go easy on me please :|
What are you trying to do regarding the element styling?
Are you trying to get the current value or set it?
In order to get some CSS styling property you can do as follows:
var color = text.style.color;
If you are trying to set/change it, you can do as follows:
test.style.color = 'green';
See this documentation for more information: https://www.w3schools.com/js/js_htmldom_css.asp
Edit:
From what I can tell OP is trying to set the opacity on the element.
text.style.opacity = 0.01 * count;
See this working here: https://jsfiddle.net/84pohswj/
But if that is the case I would suggest you use CSS animations instead. There much better option for this. And use JS to assign the animation class: https://www.w3schools.com/css/css3_animations.asp
if you want to change your opacity to 0.5
here is the code
text.style.opacity = "0.5";
I hope this helps.
Basicly i have two buttons one who will create divs with the class "TargetDummy" and another who should be able to remove the created "TargetDummy".
The problem is i cant seem to edit the "TargetDummy"divs since they don't have an ID and i can't give them one since there are several of them.
I am looking for a solution in javascript only. My code for creating the "TargetDummy"divs is below
var Div = document.createElement("div");
document.body.appendChild(Div).className = "TargetDummy";
I thought something like
var Dummies = document.getElementsByClassName("TargetDummy");
Dummies.className = "something";
or
Dummies.remove();
would do it, but unfortunately not. I am still learning Javascript so go easy on me :)
If you want to simply hide the Divs, you could loop through them and give them a new class via the className property.
Example JS:
var Dummies = document.getElementsByClassName("red");
function addNewClass() {
for(var i = 0; i < Dummies.length; i++) {
Dummies[i].className = "newClass";
Dummies[i--].className = "newClass"
}
}
http://codepen.io/anon/pen/OPZNJN
I need to pass some html code as a parameter, however, before I pass it, I need to change some src attribute values.
I cannot use lastIndexOf or any of those to modify the html value since I don't know which value the src's will have.
What I'm trying to do then, is to create an object containing the html, and then alter that object only. I don't want to alter the actual webpage.
is this possible??
What I did first was this:
$('[myImages]').each(function() {
var urlImg = "../tmpFiles/fileName" + counter;
$(this).attr('src', urlImg);
counter++;
});
So finally, I had the desired code like this:
myformData = { theChartCode: $('#TheDivContainingTheHTML').html() }
However, this actually changes the image sources on the webpage, which I don't want to.
Then I thought I could create a JQuery object with the html so I could alter that object only like this:
var $jQueryObject = $($.parseHTML($('#TheDivContainingTheHTML').html()));
But now, I can't figure out how to iterate within that object in order to change the src attribute's values of the desired images.
Any help will be really appreciated ;)
There are several ways to do It. First would be creating a clone of target element and use the same on the Fly. You can do like below:
var Elem = $('#TheDivContainingTheHTML').clone();
now do whatever you want like iterate, alter,insert,remove.
var allImages =$(Elem).children("img");
Thanks Much!
Depending on when you want to change the object, solution will be different. Let's pretend you want to change it after you click another element in the page. Your code will look like that :
var clonedHTML;
$('#clickable-element').click(function() {
var $originalHTML = $(this).find('.html-block');
var $cloneHTML = $originalHTML.clone();
$cloneHTML.find('.my-image').attr('src', 'newSrcValue');
clonedHTML = $cloneHTML.clone();
return false; //Prevents click to be propagated
});
//Now you can use `clonedHTML`
The key point here is the clone method : http://api.jquery.com/clone/.
You can clone the elements:
var outerHTML = $collection.clone().attr('src', function(index) {
return "../tmpFiles/fileName" + index;
}).wrapAll('<div/>').parent().html();
You can also use the map method:
var arr = $collection.map(function(i) {
return $(this).clone().attr('src', '...').prop('outerHTML');
}).get();
I'm trying to modify some CSS properties in a given element, this way:
var rsc_menu = document.getElementById("rsc_menu");
rsc_menu.style.top = 303;
rsc_menu.style.height = 29;
Unfortunately, after code execution the element still stays in its original position and preserves its original size.
I've noticed that alert(rsc_menu.style.top) and alert(rsc_menu.style.height) both show an empty box.The element is declared like this:
<div class="resources_menu" id="rsc_menu">
As you can see, it takes all of its styling parameters from a foreign stylesheet; I defined no style tags for it. May that be the problem? Is there any way to accomplish the task without having to change the <div> tag?
You have to pass it:
As a string
With a valid unit
So your code would be looking like this:
var rsc_menu = document.getElementById("rsc_menu");
rsc_menu.style.top = "303px";
rsc_menu.style.height = "29px";
if am having html
<TableView id=img1></TableView>
<TableView id=img2></TableView>
normally
$.img1.backgroundImage = "/Picture1.jpeg"
but I want to know how to store the id in local variable and call the same function, in place of img1 I have to use local variable. is any possibility of this.
Normally $.img1.backgroundImage = "/Picture1.jpeg" would be nonsense since jQuery doesn't populate itself with properties referencing all elements with ids on a page.
Converting that to use a variable instead of an identifier (let's say var foo = 'img1'; for the benefit of all the following examples) would be
$[foo].backgroundImage = "/Picture1.jpeg";
(That's equivalent to the original code, but since I wouldn't expect the original to work, this won't either).
To actually set the backgroundImage property in JS you would:
document.getElementById(foo).style.backgroundImage = "url(/Picture1.jpeg)";
or if you are being a jQuery junkie:
jQuery('#' + foo).css('background-image', 'url(/Picture1.jpeg)');
Yes Sure but need to adjust the code accordingly to set the background image
var img1 = $("#img1")
img1.css("background-image","/Picture1.jpeg");
var images = $("#img1");
or also you can use
var images_obj=form_name.element_name;
var yourVar= $("#img1").attr("id");
I think you want to change the background image css property of an element selected by id, who is in a local variable?
var yourid = "img1";
$('#' + yourid ).css('background-image', '/Picture1.jpeg');
You better save the object instead of id as you would need to get element by id again and again.
var img1Obj1 = $('#img1'); //jQuery object
var img1Obj2 = $('#img1')[0]; // DOM javascript object