Develop Reference

How to adjust custom css properties dynamically?

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";

Set the background color of the parentNode associated with an input box's value being null

Here is my code. When the button is clicked and the value of "requiredTitleValue" is null. The background color of the parent node associated with the tag should be set to "red". The problem is that the new backgroundColor is not sticking after the button click.
backgroundColor should stick after submit button is clicked and "requiredTitleValue" is null but it is not.
var checkTitleValue = function(){
var requiredTitleObject = document.getElementById("requiredTitle");
var requiredTitleValue = requiredTitleObject.nodeValue;
if(requiredTitleValue == null){
alert("Object is null");
requiredTitleObject.style.backgroundColor = "red";
requiredTitleObject.parentNode.style.backgroundColor = "red";
}
}
function formValidator(){
checkTitleValue();
}

As per #Mike 'Pomax' Kamermans, this code needs some serious help.
Using better practices will a make your code cleaner and easier to read, and b prevent and fix the bugs you are experiencing.
Some fast thoughts:
Don't use var. Period. Always use let and const to prevent weird hoisting behaviors
Use classes in place of style to toggle styles on elements. It's far cleaner and easier to modify down the road
Use classList to modify the classes. Note how I'm able to add / remove the class in one line, rather than having if else everywhere
Contain your code. Only allow code to exist where it needs to. Only your validator needs the checkTitleValue Function, so define it there
function formValidator(){
// Notice this is const to prevent a redefinition of the lambda
const checkTitleValue = () => {
const requiredTitleInput = document.getElementById("requiredTitle");
const requiredTitleValue = requiredTitleInput;
requiredTitleInput.classList.toggle('input-error', !!requiredTitleValue);
requiredTitleInput.parentNode.classList.toggle('input-error', !! requiredTitleValue);
}
checkTitleValue();
}

Get the list of all css styles applied to a specific element

Is there any way to get the list of only user-defined computed css styles applied to a specific html element. Styles can be applied in any fashion available now either by external css file or embedded/inline style.
.p1{font-size:14px; line-height:20px;}
<style>
.p1{ line-height:18px; color:green;}
</style>
<p class="p1" style="color:red;">Some Paragraph</p>
Now the list I require to have, is the only user-defined computed style applied to an element not the whole bunch of computed styles containing blanks/null/default-values as provided by window.getComputedStyle()
just to be more precise on my question, I'd like to put a scenario where I visit a site first-time and I want to use developer toolbar to get the only user-defined styles programmatically (or by writing some scripts on console). So taking this scenario in mind, the final output i require should be-
{
'color':'red',
'line-height' : '18px',
'font-size' : '14px'
}
Please correct me on my query or any mistake in explaination, if needed.

The method you're looking for is:
window.getComputedStyle()
See: Mozilla Developer Network (MDN) on Window.getComputedStyle();
http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.
Based on the markup and styles in your question:
var para1 = document.getElementsByClassName('p1')[0];
var para1Styles = window.getComputedStyle(para1);
para1Color = para1Styles.getPropertyValue('color'); // red
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px
The same method will also allow you to pull style property values from pseudo-elements, by declaring the second (optional) argument.
eg.
var para1AfterStyles = window.getComputedStyle(para1, ':after');

I've been looking for an answer to this question too. I have come up with a solution but it is kinda hackish. It does solve the problem though somewhat.
function getAppliedComputedStyles(element, pseudo) {
var styles = window.getComputedStyle(element, pseudo)
var inlineStyles = element.getAttribute('style')
var retval = {}
for (var i = 0; i < styles.length; i++) {
var key = styles[i]
var value = styles.getPropertyValue(key)
element.style.setProperty(key, 'unset')
var unsetValue = styles.getPropertyValue(key)
if (inlineStyles)
element.setAttribute('style', inlineStyles)
else
element.removeAttribute('style')
if (unsetValue !== value)
retval[key] = value
}
return retval
}
Let me know if it helps.
It uses css unset property value which is supported only in modern browsers. https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility

Remove / Replace class with another class without having an ID - Javascript only

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

jQuery width() not working

I'm trying to get the width of the first div of the specific class "span4" on my Bootstrap site, but the script simply fails to execute the second line where I call width(). Here's what I have:
var span = $('div.span4').first();
spanWidth = span.width();
The strange part of this is that I have similar working code immediately after that works fine when I remove the above two lines and set spanWidth to a constant:
elements = $('a.backlink');
elements.each(function() {
var a = $(this);
if (a.width() > spanWidth) {
var aText = a.text();
var lastIndex = aText.lastIndexOf(' ');
var aTruncated = aText.substring(0, lastIndex);
a.text(aTruncated + '...');
}
});
Any idea what might be causing this? I've tried a lot of different ways to format those two lines differently, such as switching to an each() method, condensing to one line, and using [0] and get(0) instead of first().

Try to set the span's display to inline-block.

#SimonM's comment led me to try replacing my implied global spanWidth with an explicit global window.spanWidth, and now everything works. Thank you!