Overwrite CSS Using JavaScript / jQuery Permanently - javascript

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/

Related

Iframe style being overrridden by website's css

I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.
The style that overrides my css style is as follows:-
#story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) {
width: 100% !important;
height: 200px!important;
margin: 5px 0px;
}
I create iframe dynamically using javascript. The site is overriding my css.
var iframe = createHtmlElement("iframe");
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );
So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.
Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.
I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.
I had experience of work like that, so in those cases I would usually do this:
- Target the iframe you created with > css pointer.
- Is there any possibility to set !important flags on your styles?
- Try to create a very long distinctive class name for your iframe.
You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.
Your best bet may be to simply use some really obscure class?
Like...
class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"

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

Is it not possible to change CSS attributes with jQuery in Rails?

Say I have an example div called test-test which is some pixels wide and some pixels high, and I wish to add its background color using jQuery. Having thought this was very easy in Rails, I'm surprised to see it doesn't work.
My html:
...
<div class="test-test"></div>
...
My test.css.scss:
.test-test {
width: 300px;
height: 300px;
}
My test.js file:
$(".test-test").css("background-color","yellow");
Because a "hello world" test works I know my jquery and asset pipeline is working correctly, it's just changing css attributes that doesn't seem to work. Is there any workaround to this or is it specific to what you want to do in each case? This is just an example so this is not what I really want to accomplish, just so you know.
When setting background-color in javascript the property should be named.
"backgroundColor"
so
$(".test-test").css("backgroundColor","yellow");
It's also case sensitive.

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.

Removing or altering CSS pseudo class in jQuery

A simple enough question, so briefly - is it possible to remove or alter in anyway a CSS pseudo class using jQuery? Or any other Javascript method for that matter
Specifically I want to get rid of :focus on inputs. I can't alter the CSS file directly in any way.
thanks for any help
Buster
I can't alter the CSS file directly in
any way.
Assuming you can only use JavaScript to do this, I can't think of anything better than:
$('head').append('<style>input:focus{background:#fff}</style>');
You will have to individually reset each property. font-weight:normal, color:#000 - whatever you need.
See: http://jsfiddle.net/jqpAu/
Without more specific detail it's hard to answer accurately, but if you want you can just override the :focus style:
// in the CSS file
input:focus {background-color: red;}
// in your page
input:focus {background-color: inherit;} // overrides with the parent background
Demo
See this answer: Setting CSS pseudo-class rules from JavaScript
I think you are looking for a way to add CSS dynamically. Example: http://jsfiddle.net/zkMCY/
Code:
var style = '\
<style type="text/css">\
a:hover{ color: #a55; }\
</style>';
$('body').append(style);
If you want to actually prevent the user from using your input, do that via your html:
<input disabled="disabled">
you can use $(selector).removeClass(className)

Categories