when watching this tutorial, I tried to repro the JavaScript used in the beginning.
However when setting up the function
function setRandomColor(e)
{
var bodyElement = document.querySelector("body");
bodyElement.style.background.Color = "yellow";
}
the part
bodyElement.style.background.Color = "yellow";
does not run, simply because style is not shown as an option.
Per my reseach this is supposed to work. Therefore my question: Is this a bug or what?
Note that I am using Visual Studio 2015 with Apache Cordova, version 14.0.22609.0 (CTP6, I believe).
Thanks
You should use
bodyElement.style.backgroundColor
According to w3schools, the background attribute you are calling is not supported in HTML5.
To correctly call the background color, try:
bodyElement.style.backgroundColor = "yellow";
For more information:w3schools explanation
Related
Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.
Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?
Thanks!
I just opened up a random bootstrap template site and did what you where asking for.
Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.
Switch to the console tab.
Use Jquery selector to select all
the intended elements (you can use the same css selector here too
but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
The result is all the elements
of that selector.
NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.
In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).
Visually
Temporarily set a border or background color for the selector, like:
border: 1px solid red;
Or:
background: red;
This makes it very easy to find the affected elements.
Programmatically
On the JavaScript console, use:
// Replace with something that prints the relevant details
var stringify = function(element) { return element.innerHTML; };
// Iterate over all affected elements and print relevant info
var affectedElements = document.querySelectorAll('.your .selector');
var len = affectedElements.length;
console.log('Elements affected: ' + len);
for (var i = 0; i < len; i++) {
var affectedElement = affectedElements[i];
console.log(
'Element ' + (i+1) + ':\n' +
stringify(affectedElement) + '\n\n');
}
The inspection of elements feature of the browser is meant for the purpose you want.
1.Open up the index file in any browser(preferably Mozilla Developer edition),
2.Right click and Inspect element,
3.Then open the compiled stylesheet. Find out the style element you want to check the effect of.
4. Go back to inspection, remove/add CSS properties and see the effect in real time.
The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.
I am manipulating CSS styles using React with code that resembles this:
let el React.findDOMNode(this.refs.thing);
el.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
el.style.transformOrigin = `${100}px ${100}px)`; // SPOT THE TYPO
The transform CSS property works and shows up when I inspect the element in the browser (Chrome). The transform-origin property does not show up, and I cannot figure out why.
I log to the console just before this code, so it is being executed. When I intentionally do something like:
el.style['transform-origin'] = etc.
I don't get a warning from React, despite using the development build.
As spotted by wintvelt, there was a spurious parenthesis in my code:
el.style.transformOrigin = `${100}px ${100}px`;
is correct.
I am trying to apply a gradient to an element using angular but failing to do so with ngStyle.
Here is an example of what I try to achieve:
http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/
Old link, not working anymore http://run.plnkr.co/maDs3PSWw4Y5tDfb/
In the example I am using the plain style="{{css}}", which is not the recommended approach as described in the documentation (short version, step 5). It will not render in IE <= 11.
If I try to use ng-style="css" and set up like this:
$scope.css = {
background: '-webkit-linear-gradient(' + gradient + ')',
background: '-moz-linear-gradient(' + gradient + ')'
…
}
You'll see the obvious problem, the css object can just contain one instance of background.
I cannot think of many instances where I'd have to browser-prefix like this. Does AngularJS address this in any way or is there a IE <= 11 solution?
It's an interesting question and I don't think a solution exists at the moment, though seeing as gradients didn't exist prior to IE 10 there may be a work around:
For IE 10, 9 & 8 you can use this as no conflicts exist.
$scope.css = {
'-ms-filter' : "progid:DXImageTransform.Microsoft.gradient ("+iegradient+")",
'background' : "linear-gradient("+gradient+")"
};
while style="{{css}}" will do for all other modern browsers( ie. include both style and ng-style).
Note: I'm assuming that style={{}} will fail silently in < IE11
If this doesn't work for you, you could always create a directive specifically for background gradients. Let me know if you need help with that in the comments.
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
I am working with the Mojo SDK and I'am trying to add a background image to a div but havn't been able to find a way to do it.
Obviously I have tried doing it the normal CSS-way but it doesn't seem to work with Mojo.
Here is the latest thing I tried:
var t=document.getElementById("kblayoutdiv");
t.parentNode.removeChild(t);
var t=document.getElementsByTagName("BODY")[0];
var div=document.createElement("div");
div.style.position="fixed";
div.id="kblayoutdiv";
div.style.display="block";
div.style.top="80%";
div.style.left="92%";
div.style.width="16px";
div.style.height = "11px";
div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');
div.style.zIndex = "255";
t.appendChild(div);
window.kblayout="en";
I have tried several solutions to get the background image to show.
The rest is working fine. It is just the background iamge that won't show no matter what.
So if anyone can show me the piece of code to add the background image I'd be real happy :)
div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');
You have to quote strings in JavaScript
div.style.background = "url('/usr/palm/frameworks/mojo/keyb_en-us.png')";
Obviously, the URI has to be correct as well.
That said, as a rule of thumb, it is almost always better to predefine all your styles in an external stylesheet and generate elements that match the selectors (e.g. by setting .className).