We Keep Coding

How to manipulate css code line by time?

My question is, how to manipulate this line in css by time with like a javascript code, for an other image? Like a slideshow!
If it's only possible in that way, in another code language.
.header { background: url(../img.jpg); }

You can use jQuery's css function to do it:
$(".header").css("background", "../img/bg2.jpg");

You have to add background property into style attribute. because you have no chance go to css file via js

CSS on SAPUI5 Controls

I have a sap.m.Input inside a div tag in HTML view of sapui5. When I apply css to the div, it works fine on all the div elements. However, I want to apply css on a single control inside the div tag. It is not working. The code is :
<div data-sap-ui-type="sap.m.Label" data-text="Sr.No :"></div>
<div data-sap-ui-type="sap.m.Input" id="id_SrNo_Val" data-width ="10%"></div>
The above code does not work if I apply css to the input. It works fine on the label. I am trying to reduce the height of the input. It works on Chrome console with runtime id. However I want to apply css with the given id which it does not accept.
Please help.

In SAPUI5 we don't know at which point time of CSS is applied to the Controls.
So you've to give "priority to your css class or id" which can be achieved using the property !important
Add your CSS property like following
#id_SrNo_Val {
height : 10px !important;
color : blue !important;
}
Use anything you want with !important property.
Update: Avoid !important because it'll become harder to debug at some point of time. Also in CSS, it's not suggested to use.

You may assign additional class to a control adding class="yourStylingClass" attribute.
You shouldn't use control ids for styling, since SAPUI5 may modify those, add prefixes etc.

Getting rid of background properties

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.

jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

Combining inline css and hover state, is it possible?

I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?
Simple example
<div id="test" style="color: red">test</div>
<style>
#test:hover {
color:blue;
}
</style>
In this case hover doesn't work.
Update
I can't use !important, because after it I will not be able to change that atribute via JavaScript.
Also I generate styles dynamically, so I can't add specific classes via JavaScript.

because inline css overrides your css styles in the file
if you had
color: blue !important
it would work but not recommended, you can always use jquery to remove the inline style tag though haha
Update:
remove the style tag using jquery or when using javascript... add !important so the inline css would have important

I can't use !important, because after it i will not be able to change
that atribute via javascript.
You can still use !important, just add a class with JavaScript and remove it anytime you want.
demo

The easiest way to go is the following
$(selector).hover(function() {
$st = $(this).attr("style");
$(this).attr("style","");
},function() {
$(this).attr("style",$st);
});

In CSS, the style attribute will override any style elements or stylesheets. If you cannot change the the style attribute, you'll have to use !important. If you can remove the style attribute altogether and place everything in the style element. Or even better, in a separate stylesheet your problem will be fixed.
P.S. The type attribute is required on style elements. This won't fix your problem, but you should change <style> to <style type="text/css">

Overwrite CSS Using JavaScript / jQuery Permanently

Is it possible to overwrite CSS file permanently using JavaScript / jQuery?
I want to overwrite just 1 or 2 lines though.
Let's say I have this CSS file:
div#box { width:100px; height:100px; }
then, if I apply this kind of JavaScript:
var sheet = document.createElement('style')
sheet.innerHTML = "div#box {width:200px;}";
document.body.appendChild(sheet);
the div only resized as long as the JavaScript is called (dynamically changed by JavaScript)
I want the CSS file would be overwritten like this
div#box {width:100px; height:100px; }
div#box {width:200px; } //CSS added
or more nicely,
div#box {width:200px; height:100px; } //CSS overwritten
What should I do?
Thx :D

To elaborate on what has been said (And mmmshuddup and calchen are correct):
Javascript alters files on the client side until the document is closed. The changes that scripts make are entirely temporary.
However, javascript could technically use ajax to access a perl/ruby/php/python/whatever script hanging out on the server which would take arguments (What the class would be, which element it would be added to) and apply the classes permanently to your documents, or otherwise edit your style documents.
Another solution would be creating and adding classes and then saving those classes as preferences for a user; you'd create a function which looked through an associative array of element id's and their classes that need to be added upon the page being loaded. I suppose you'd use either cookies or preferably a database for this, if you have users at all. I'm just throwing hypotheticals out there.
I'm pretty sure the server-side editing idea is your best option. It would probably be pretty safe to use regex to locate id's and replace them with the new style.
edit: Upon thinking about it, I realized your style finding and replacing function would have to be pretty sophisticated if you ever wanted to do replacements of styles that involved a lot of selectors. There is probably a more elegant solution, but it's not coming to me. I think this would be a serious headache eventually.

CSS cannot be permanently overwritten using only jQuery/JavaScript.

Try below
$(document).ready (function() {
$('div#box').css( {"border": "1px solid #7F9DB9", "width": "200px", "height": "22px"} );
});
Please do needful changes.

Use something like PHP. Otherwise you can modify the css with jQuery.
// for div#box {width:200px; height:100px; }
$('div#box').css({ width: '200px', height: '100px' });

JS can't do this alone, you need the use of a server side language such as PHP, i can make one for you in PHP if you'd like.
If you want to do it on a per page basis you can use a style tag with contenteditable attribute see: http://devgrow.com/html5-contenteditable-attribute/