I'm new to frontend development, and I want to rezize an <img> with JavaScript:
Which element?
<div class="dz-image">
<img data-dz-thumbnail="" alt="principal.png" src="http://localhost:49407/file/Image/660">
</div>
What function im using in js?
this.emit("thumbnail", mockFile, "http://localhost:11111/file/Image/" + principal)
{ document.querySelector('data-dz-thumbnail') };
I'm using querySelector to get the spefic <img> element.
Is it possible to add some style directly on that line like height:120; width: 120;?
Yes,it is possible to add some style directly.
let ele = document.querySelector('[data-dz-thumbnail]')
ele.style.width="120px"
ele.style.height="120px"
Per my understanding, queryselector should be classname, id or tag
Second you can add css by taking a variable for your querySelector line. It is like:
var el = document.querySelector('div');
el.style.backgroundColor = 'green';
el.style.display = 'none';
el.style['border-radius'] = '5px';
I solved this using jQuery's .css() method like this:
$('[data-dz-thumbnail]').css('width', '120');
$('[data-dz-thumbnail]').css('height', '120');
Related
I've created the following...
var menu = document.createElement('select');
How would I now set CSS attributes e.g width: 100px?
Use element.style:
var element = document.createElement('select');
element.style.width = "100px";
Just set the style:
var menu = document.createElement("select");
menu.style.width = "100px";
Or if you like, you can use jQuery:
$(menu).css("width", "100px");
For most styles do this:
var obj = document.createElement('select');
obj.style.width= "100px";
For styles that have hyphens in the name do this instead:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"
That's actually quite simple with vanilla JavaScript:
menu.style.width = "100px";
Just for people who want to do the same thing in 2018
You can assign a CSS custom property to your element (through CSS or JS) and change it:
Assigment through CSS:
element {
--element-width: 300px;
width: var(--element-width, 100%);
}
Assignment through JS
ELEMENT.style.setProperty('--element-width', NEW_VALUE);
Get property value through JS
ELEMENT.style.getPropertyValue('--element-width');
Here useful links:
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty
All of the answers tell you correctly how to do what you asked but I would advise using JavaScript to set a class on the element and style it by using CSS. That way you are keeping the correct separation between behaviour and style.
Imagine if you got a designer in to re-style the site... they should be able to work purely in CSS without having to work with your JavaScript.
In prototype I would do:
$(newElement).addClassName('blah')
When debugging, I like to be able to add a bunch of css attributes in one line:
menu.style.cssText = 'width: 100px';
Getting used to this style you can add a bunch of css in one line like so:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
if you want to add a global property, you can use:
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
<h1>Silence and Smile</h1>
<input type="button" value="Show Red" onclick="document.getElementById('h1').style.color='Red'"/>
<input type="button" value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>
This works well with most CSS properties if there are no hyphens in them.
var element = document.createElement('select');
element.style.width = "100px";
For properties with hyphens in them like max-width, you should convert the sausage-case to camelCase
var element = document.createElement('select');
element.style.maxWidth = "100px";
<body>
<h1 id="h1">Silence and Smile</h1><br />
<h3 id="h3">Silence and Smile</h3>
<script type="text/javascript">
document.getElementById("h1").style.color = "Red";
document.getElementById("h1").style.background = "Green";
document.getElementById("h3").style.fontSize = "larger" ;
document.getElementById("h3").style.fontFamily = "Arial";
</script>
</body>
Using the solution suggested here: https://stackoverflow.com/a/32135318/10279127 i'm trying to create a new div, and append it inside a parent div with id, next to a child <a> html element.
html:
<div id="div0">
anchor text
// I'd like to place the new div here
</div>
js:
Element.prototype.appendAfter = function(element) {
element.parentNode.insertBefore(this, element.nextSibling);
}, false;
var NewElement = document.createElement('div');
NewElement.id = 'newDivID';
var tToAfter = $('#div' + index + ' > a'); // this is what i tried but doesn't work
NewElement.appendAfter(tToAfter);
If inside .appendAfter(...) instead of tToAfter i write document.getElementById('randomElementId') it works and appends it, so i think must be pure javascript, is there a way in js to do something like: document.getElementById('div' + index).firstChild to get the <a> ?
Or to make it entirely with jQuery using the insertAfter (https://stackoverflow.com/a/8707793/10279127) ?
you can select inside div#div0 by using
const anchor = document.querySelector("#div0>a");
You can simplify your approach by using insertAdjacentElement. For example (the css is irrelevant - just there so you can visually see the inserted div):
const anchor = document.querySelector('#div0 a');
const elem = document.createElement('div');
elem.id = 'newDivID';
anchor.insertAdjacentElement('afterend', elem);
div:not(#div0) {
height: 20px;
background-color: green;
}
<div id="div0">
anchor text
// I'd like to place the new div here
</div>
Faced with necessity to hide unwanted element on embed website. There's piece of HTML code:
<section class="class Name" style="display: block;">
Problem: Manipulate with CSS does not work due to 'display: block' written inline in HTML body.
Question: Is there any way how to remove this element OR rewrite 'display: block' TO 'display: none' with Java script OR jQuery?
May be it worth, here's exact piece of code that necessary to rewrite from 'display: block' to 'display: hide':
<section class="promotion-block custom-storey no-margin-bottom multi-lang-default en ru pt es fr" style="display: block;">
The task is to add some script that will force native code to be rewritten from display: block; to display: hide;
Thanks!
Try in java script..
document.getElementById('#ElementId').style.display = 'block';//show
document.getElementById('#ElementId').style.display = 'none';//hide
and with jQuery..
$("#ElementId").hide();
$("#ElementId").show();
Hope this helps...
you are going to need to manipulate the JavaScript style proprieties here did you try this:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
remember to create an getelementID(div ID around or into section tag)
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
in JQuery use this to hidden/show div block:
$(".divIDClass").hide(); // hidden
$(".divIDClass").hide(); // show
There needs to be some user interaction to make to toggle between being visible and hidden, i will be assuming it to be a click event on a button with id button.
<script>
var buttonEL = document.getElementById("button");
buttonEL.addEventListener("click" function(){document.getElementsByClass("className")[0].style.display = "none";});
</script>
or if your set up requires it to be hidden always just have
document.getElementsByClass("className")[0].style.display = "none";
There is 2 way to hide the section
override the style attribute.
Use jQuery hide() and show()
If the section is dynamic loaded then you have to use jquery on function .
code:
$(document).on('load','section[class="class Name"]',function()
{
$(this).css('style','display:none');
});
$(document).on('load','section[class="class Name"]',function()
{
$(this).hide();
});
If not dynamic loaded
code:
$('section[class="class Name"]').css('style','display:none');
$('section[class="class Name"]').hide();
JavaScript:
function hide_article() {
var htmlElement = document.getElementsByTagName("article")[0];
htmlElement.setAttribute("visibility", "hidden");
console.log("hiding");
};
HTML:
<div id="right-hand-side">
<img src="resources/Logo.png" onmouseover="hide_article()" onclick="hide_article()"/>
</div>
This function is being called but the article is not being hidden. Any idea why? Cheers.
Yes - visibility is a CSS rule name, not an HTML attribute.
htmlElement.style.visibility = 'hidden';
Bear in mind, though, that, unless you have good reason to use visibility (and there are some), you'd normally hide elements via display (= 'none') rather than via visibility.
Also, you're assuming that your function will find an element. If it doesn't, your code will error. Best to check this first:
function hide_article() {
var htmlElements = document.getElementsByTagName("article");
if (htmlElements.length) { //<-- check before continuing
htmlElements[0].style.visibility = "hidden";
console.log("hid element");
}
};
This is the statement that you want:
htmlElement.style.visibility = 'hidden';
newNode = document.createElement("span");
newNode.innerHTML = "text";
range.insertNode(newNode);
Is it possible to make the text in innerHTML with red background color? I want to add style="background-color:red" to just created span. Is it possible? Or it must have some id, and then I can change this span with jQuery?
Simple enough:-
newNode.style.backgroundColor = "red";
Better to give a classname for the span
<style>
.spanClass { background-color: red; }
</style>
newNode.className = "spanClass";
This worked for me:
var spanTag1 = document.createElement('span');
spanTag1.innerHTML = '<span style="color:red">text</span>';
OR
add class using js and set css to that class
var spanTag1 = document.createElement('span');
spanTag1.className = "mystyle";
Now set style to that class
<style>
.mystyle {
color:red;
}
</style>
You can add attributes directly to the DOM object. The style attribute can be assigned by this way too. Example:
var span = document.createElement("span");
span.setAttribute("style","color:white;background-color:red;");
var text = document.createTextNode("My text");
span.appendChild(text);
Of course you have to add this element created to their parent object in your page:
var parent = document.getElementById("parentObject");
parent.appendChild(span);
This method "setAttribute()" lets you to add other non-standard attributes used by animations and custom jquery options to your HTML standard tags.