Iam new to javascript, I have given style for a div by using javascript in one js file and i want to get that style from another js file. how it is possible??
when i used
var height= $("#searchComment").css("height");
and on alerting the result it is get like 'undefined'.
if this style is given in html it returns correctly.
test1.js and test2.js are included in index.html
In test1.js ihave given styling to a div of id 'searchComment'
$( "#parentDiv").append("<div class='ui-li-desc' id='searchComment' style='height:50px; width:40 px'></div>");
and in another js file test2.js i want to get the style of div of id 'searchComment'.
how can i get this style?? please help me.
Thank you
use jquery selector and then change css:
$('.number').css({'font-size': '12px', 'text-align': 'left'});
You have to give ID for that div by using the id you can get it from other JS
Limitation :
Both js should be using in that HTML file.
Before using id of <div> you have to create that div
Ex :
test1.js
$("#commentList").append(<div class='number' id="mydiv" style='font-size: 18px;
text-align: justify; direction: rtl; float: right; width: 12%; padding-top:75px;'>
some Variable</div>);
test2.js
document.getElementById("mydiv").style;
You can change of any elements style from any file, But the standard practice is to add class instead of changing style of an element. To add class you can use .addClass('new-class') jQuery function. And put all your style for new class in separate CSS file. And if you just want to add style anyway without caring about standard, then you can use .css jquery function.
$(".number").css({
'attribute1': value,
'attribute2': value,
});
i think you want the description of the css class use. refer the post
function getStyleRules(className) {
var class = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < class.length; x++) {
if (class[x].selectorText == className) {
(class[x].cssText) ? alert(class[x].cssText) : alert(classes[x].style.cssText);
}
}
}
getStyleRules('.YourClassName');
click here
Related
Suppose I have a CSS file custom_style.css and a HTML file custom_render.html.
custom_render.html contains some input field to take input from user and than generates CSS styles based on those input.
Now I want to store those generated CSS styles in a CSS file called custom_style.css [that is located in my projects root directory], so that I can show the users a preview/output of their selections.
After googling I got a way to store those generated CSS in the same file [custom_render.html] using JavaScript, but I want to store them in custom_style.css.
Can anyone tell me how can I write CSS Styles in CSS files using JavaScript or other JavaScript framework.
- Thanks
Well, you can modify the parameters of objects in your stylesheets. For example:
document.styleSheets[i].rules[j].style.marginTop = "100px";
i being the number corresponding to the sheet you want to edit
and
j being which element rule you want to change the parameter for.
In this case I used marginTop as a paramater and 100px as a value but it could be whatever valid CSS you would like.
simple... (assuming this is what you trying to achieve)
var elem = document.getElementsByClassName('target_class');
// should use for loop to assign click event to each element containing this class
elem[0].onclick = function() {
elem[0].style.background = 'green';
elem[0].style.opacity = '0.2';
}
<div class="target_class" style="width: 200px; height: 200px; background: red"></div>
insertRule(rule, index)
This will inserts a new rule to the stylesheet, where the parameter "rule" is a string containing the entire rule to add (ie: #myid{color: red; border: 1px solid black}), and "index", an integer specifying the position within cssRules[] to insert the new rule.
document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) //add new rule to start of stylesheet
I'm new to JavaScript. I managed to add dynamic inputs after clicking on a button but I want to know how to apply the CSS to those added inputs, if anyone can give me a simple example i'd be glad!
Thank you!
Perhaps something like this:
<button onclick="newInput()">Add new input</button>
function newInput() {
var newElement = document.createElement("input");
newElement.className = "newClass";
document.body.appendChild(newElement);
}
And in the style section, or in the .css file, you'll have:
.newClass {
/*Styles go here*/
display: block;
}
Fiddle example of the above: http://jsfiddle.net/8zen9wwo/3/
Here is a very simple example using jQuery:
http://jsfiddle.net/kmrvpz99/
Html Code
<div class="container"></div>
Javascript Code
$('.container').append('<input type="text" class="yourstyle">');
var manualCss = $('<input type="text">').css('background-color', '#333');
$('.container').append(manualCss);
The css File
.yourstyle {
background-color: #000;
}
By defining .yourstyle in the css file, all elements on the html site that possess this class, even those dynamically added via javascript, will use this style. You can however manually modify the css by setting the style attribute on the element directly.
Directory Structure:
index.html
--admin
----suit.css
And the part of the css file is:
#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}
I want to write a javascript code in the index.html:
<button onclick="">Change CSS</button>
to change the css file like this:
#suit-left { display: none; }
.suit-columns { padding-left: 0; }
How can I do this?regards,thanks a lot
If you want the apply css on particular element by javascript, do something like this.
<button onclick="changeCss()">Change CSS</button>
UPDATE
<script>
function changeCss(){
var suitInput = document.getElementById('suit-left');
suitInput.style.display = 'none';
//UPDATED the answer
var siteCol = document.getElementsByClassName('suit-columns')[0];
siteCol.style.paddingLeft = '0';
//siteCol.style.paddingRight = '0'; //incase of want padding right 0
}
</script>
What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.
Here is a simple example:
.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }
In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.
In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.
I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -
Add class to given element
Using an HTML button to call a JS function
You can write the script in this way and paste below script at head block of index.html
I assume that you have knowledge of jquery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
function ChangeCss(){
$('#suit-left').css('display','none');
$('.suit-columns').css('padding-left','0');
}
<script>
<button onclick="ChangeCss();" >
Now it will help!
So basically using css function of jquery you can change css/style attributes.
I hope it will help you.
I am trying to use style attribute for JavaScript. But, apparently, I was doing something wrong with it. I am new in JavaScript so a general idea about style attribute for JavaScript would be great. I want to change the place, color and text-decoration etc. of JavaScript elements. I thought that declaring style attribute for div changeMe in HTML will be applied for the JavaScript. Because, JavaScript takes id of it. I wanted to use all of the style attributes that are in the div. Where am I missing? Here is my attempt to do it:
<div id="changeMe" style="position: absolute;text-decoration: none;
color: white;right:43%; top: 90px;">
<a href="home.php" >Go to homepage</a>
</div>
Javascript:
var testElement = document.getElementById("changeMe");
var text = "aaa".document.getElementById("changeMe");
text.style.textDecoration = "none"; //I changed style here too because first did not
//work.
check.onfocus= function()
{
testElement.innerHTML = text.link("index.php");;
}
Please help me understand the structure.I am stuck.Thanks
Your JavaScript will error here:
var text = "aaa".document.getElementById("changeMe");
…since "aaa" is a string and strings do not have a document property. The rest of the script won't execute.
If you fixed that line, then:
text.style.textDecoration = "none";
… would have no effect. The text-decoration is part of the link's style, not the div's.
You need to style the <a> element. If you really want to get to it via JS then you can:
testElement.getElementsByTagName('a')[0]
But you would probably be better off just using a stylesheet:
#changeMe a { text-decoration: none; }
But make sure you do something else to make it clear that the piece of non-underlined text is a link.
You're trying to style the div but you need to apply your text-decoration and color styles to the a tag itself for it to take effect.
All of this can easily be done with cascading style sheets instead, by the way.
document.getElementById("changeMe").firstChild.style.textDecoration = "none";
Working Example: http://jsfiddle.net/8Evyq/
Something definitely fishy here.
var text = "aaa".document.getElementById("changeMe");
// Without those "aaa"
var text = document.getElementById("changeMe");
// To change the <a> style inside the 'changeMe' <div>
var alinks = text.getElementsByTagName("a");
for (var i=0; i<alinks.length; i++) {
alinks[i].style.textDecoration = "none";
}
Here it is in action.
I have a CKEditor used to edit a text in a web-page.
In the web-page, the text renders in its context and therefore follows the page CSS formatting.
My question is how to tell CKEditor to apply a CSS style-sheet to the editor rendering ? Without of course changing the generated source ?
My code :
<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'actu-content' );
};
</script>
and my CSS :
.ActuContent{
padding:10px 10px 10px 10px;
color:#416a8b;
font-size:1.6em;
}
And my CKEditor Config.js file only contains the toolbar config.
CKeditor does not apply the settings of ".ActuContent" to its rendering ...
The actual best answer to this question would be:
CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');
Because you probably would like to have different styles in different editors. If you change the main content.css like Jalil did, you would not be able to do that.
I found a very easy way to answer my question :
the content.css file in CKEditor directory !
I only had to put in the style I wanted to be applied inside the Editor :
body {
color: #416a8b;
font-family: Arial;
font-size: 18px;
font-weight: 400;
text-align: left;
}
That's all :-)
See this posting:
CKEditor: Class or ID for editor body
The solution posted by nemisj will set the class name onto the body of the editor's editable area.
You can do this in an editor onload function. Call this before you call .replace.
CKEDITOR.on( 'instanceReady', function( ev )
{
CKEDITOR.instances.e1.document.$.body.className = "foo";
});
Sometimes when I need to set some styles to the CKEditor on the fly, for example depending on user settings, I use setStyle() and setStyles() functions on the editor's body object. Sample code:
var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);
Another sample:
var editor = CKEDITOR.instances.editor1;
var styles = {
"font-family": "Arial",
"color": "#333"
};
editor.document.getBody().setStyles(styles);
CKEditor uses a DIV with normal HTML elements to represent the text you're editing. Just have a look at the content of this DIV and write a appropriate style sheet.
Of course, this only works if you don't modify the output of CKEditor before you render it.
If you change content.css file you may discover that it's been cached. It's not a trivial task to refresh it in your browser since CKEDITOR.timestamp is added only to js files. I came up with the following solution:
// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;