Is there an equivalent for the jQuery $.css function in dart?
I can read the (computed) style of an element, but as far as I can see there is no way of setting a style.
Using Element.style isnt enough ?
myDiv.style.backgroundColor = 'red';
myDiv.style.setProperty('-webkit-cssexperimental','value');
It's also working with a multi elements selector:
querySelectorAll('div').style.backgroundColor = 'green'; //color every div
Related
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
The angular directives ng-show and ng-hide don't preserve layout.
and bootstrap classes don't either
<div class="show">...</div>
<div class="hidden">...</div>
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
ng-hide and ng-show uses display:none
You need to add new property in CSS for visibility : hidden
.element-hidden{
visibility: hidden;
}
And then provide the condition to ng directive - ng-class
e.g.
ng-class="{element-hidden : hideBox == true}"
where hideBox == true is the condition you want to check..
You're looking for the CSS visibility attribute which makes an item invisible, but still allows the element to take up space on the DOM. There's no built-in Angular directive which will do this so you'll need to roll your own.
myApp.directive("visiblityOn", function(){
return{
restrict: "A",
link: function(scope, element){
scope.$watch('visibilityFlag', function(){
element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
});
}
}
});
and a corresponding controller that will work with your directive:
myApp.controller("myController", function($scope){
$scope.visibilityFlag = true;
$scope.changeVisibility = function(){
$scope.visibilityFlag = !$scope.visibilityFlag;
};
});
Example
#RahulPatil's answer is correct but somewhat inelegant. I would suggest to keep using ng-show/ng-hide because it's easier and more readable (i.e. keeps using the same pattern), and add an override in CSS for you particular items:
.keepInFlow.ng-hide {
dislpay: block!important;
visibility: hidden;
}
<div class="keepInFlow" ng-show="show">..</div>
Angular's documentation also mentions overriding ng-hide
Basically:
div:hover
{
body{ background-image:(bg.png); }
}
This is logical code, I know it does not work, but its the best how I can show you my problem.
Well what your trying to accomplish cannot be achieved that way using Css only, You can do it using jquery like this
$("#someDiv").hover(function(){
$("body").css("background-image", "url('image_url')")
});
In css ,You can not do this as "body" is parent element to "div" and it should come next to the element hovered to use the for format like
firstelement:hover second_element {/*styles*/}
you can use jquery to achieve it
$("div").hover(function(){
$("body").css("background", "url('url_of_image_here')")
});
or javascript
elem = document.getElementById("ID");
elem.addEventListener("mouseout", function(){
document.getElementsByTagName("body")[0].style.backgroundImage="url()";
});
I somehow have to programmatically set the width of the :before for a div.
<div className="something" style={someStyle}> </div>
How can I define the someStyle so that the width of the :before of .something``div can change accordingly??
Yes, you can programmatically change the value of pseudo-elements like ::before, ::after in react.
Here is a trick.
app.js
const widthVar = 34;
const someStyle = {
"--width": widthVar
}
<div className="something" style={someStyle}> </div>
style.css
.something:before{
width: var(--width),
// remaining code
}
Pseudo elements cannot be styled with inline styles as explained in https://stackoverflow.com/a/14141821/368697. You will have to style the something class name in a stylesheet with the .something:before selector. This is not a limitation of React but rather a design choice for HTML + CSS.
If you need to programmatically change the width of the pseudo :before element, it is probably more appropriate as a regular DOM element rendered by React.
I got insight from #am2505 to use CSS variables as it helped me however, this way avoids inline styling.
HTML
<div className="something"> </div>
CSS
:root {
--width: <yourDefaultValue>
}
.something:before{
width: var(--width),
}
JS
const changeWidth=() => {
let root = document.querySelector(':root');
root.style.setProperty('--width', '<yourNewValue>px');
call the function at the event you want the width to change.
The changeWidth function can be further modified to dynamically work with state using conditional statements.
I wonder what the the part ::-webkit-search-decoration do in the CSS selector for input[type="search"]::-webkit-search-decoration?
And why is this causing en DOM Exception error?
function is(selector, element) {
var div = document.createElement("div"),
matchesSelector = div.webkitMatchesSelector;
return typeof selector == "string" ? matchesSelector.call(element, selector) : selector === element;
}
is('input[type="search"]::-webkit-search-decoration', document.body);
It allows you to make search boxes look uniform across multiple browsers. Chrome for instance has default styling for search boxes that does not fit into some designs.
here is a good link on the topic.
http://geek.michaelgrace.org/2011/06/webkit-search-input-styling/
It just makes your search box little bit styled.As it is one of the property for css3 then it will not work on every browser.
Have a look in this link
http://css-tricks.com/webkit-html5-search-inputs/
I create widgets for sites which I don't own.
After injecting html, I do the following to style the widget:
var style = document.createElement('style'),
stylesString = 'minified css with a prefix for each selector eg. .my-prefix p {... }',
rules = document.createTextNode(stylesString);
style.type = 'text/css';
if(style.styleSheet) {
style.styleSheet.cssText = rules.nodeValue;
} else {
style.appendChild(rules);
}
document.getElementsByTagName('head')[0].appendChild(style);
But on some sites my styles are overridden.
Is there a way to apply the styles more precisely?
I don't want (can't) to use:
iFrame
!important on every property
This is most likely caused by the elements in question either having inline styles on them (for which you will have to use !important to override, if you want to use your current method of adding styles), or having styles with a higher selector precedence.
My suggestion would be to make your selectors more specific by adding at least an id to them - although this is still no guarantee your selectors will still be the most specific. It is entirely down to the quality of the stylesheet on the original site.