0

so i'm trying to do some research on this topic for a project I will be doing and I figured why not get some feedback from some true javascript gurus :)

I need to create a bunch of "css, js, html" templates that will all be inlined in a single page and injected into a webpage via a already built system on the clients end. All I will be doing is making certain things like "font-size", "color", "background-color", "img[src]", and "a[href]" editable so I need to create variables for these parameters and then have them be controlled via vanilla javascript.

What I would love to know and get feedback from is what would be the best way to go about doing this using vanilla javascript?

Any help or feedback will be greatly appreciated!!

Thank you

user2517626
  • 11
  • 1
  • 3

2 Answers2

0

While it's possible to do this in vanilla JavaScript, I suggest you don't try it. The API to access a page's style sheets is ... er ... could be better?

See these questions for some ideas how to manipulate style sheets from JavaScript:

Next, I would suggest that your server inserts code to load a framework to manipulate the style sheets. Afterwards, you should load a second script which uses the framework to manipulate the styles.

But at the end of the day, it might be more simple to look at SASS or LESS on the server to compile CSS from a powerful meta language which allows you to use variables.

Community
  • 1
  • 1
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • hey thanks for answering but i cannot use any frameworks or sass because it all has to be inline and be able to run inline..the variables would probably need to be declared at the top of page, then inline css, then html, then javascript at bottom of page .. something like that.. this is going to be like a small template that will then be injected into a page. The templates will be customized by the clients themselves to work for theyre companies colors and logos and what not. – user2517626 Jan 09 '14 at 16:41
  • In this case, you should have a SASS file per customer and a servlet or service mapped to the URL `customer.css` which gets generated out of the SASS file at runtime. Since the file doesn't change, you can do the conversion once when the first request comes in or even statically when you build the application for the customer. – Aaron Digulla Jan 10 '14 at 08:26
0

Am I right in understanding this as follows:

User will edit fields on a page such as "font-size:" and you want the page to dynamically change according to what they have entered?

If so I think the first thing you need to explore is jQuery. jQuery has methods that enable you to change the CSS (e.g. font-size or background-color) on the fly. You can use it to execute these methods on an particular event, e.g the click of a submit button.

So you'd have something like

//prepare the function that we want to be executed on submit button click
var makeChangesToPage = function() {
    //record the user-entered value for the background color and store it as variable "bgcolor"
    var bgcolor = $('#bgcolorfield').val();

    //now change the CSS of the page (document.body) so that the background color is now equal to our stored bgcolor value
    $(document.body).css('background-color', bgcolor);
}

//tell jQuery to kick off those changes whenever the button is actually clicked
$('#button_submit').click( makeChangesToPage() );

Where I've used $('#something') above, that is a jQuery selector to find any HTML elements where you have set the id as "something" e.g for the submit button we set its id like this when first creating the button on the page in our HTML:

<input type="submit" id="button_submit" value="Submit">

And then we can 'find' it to use in our JavaScript using the jQuery selector:

var myButton = $('#button_submit');

I've left most of the relevant and any other jQuery/CSS changes (after background-color) for you to work on but that should kick you off in the right direction.

drewstiff
  • 63
  • 5
  • Hey thanks for answering .. I know jquery and trust me i would love to use it but we cant have any frameworks. It has to be done in vanilla javascript which is why i want to try and find out the best solution for this since normally i would just use jquery. – user2517626 Jan 09 '14 at 16:39
  • @user2517626 ah ok. In that case you've just got to do it the hard way, which would take me just as much research as it would take you so sorry I can't help you further. It's definitely possible, in the sense that jQuery is written in JS, so therefore if it's possible in jQuery then it's achievable in just JS. But most people would just use jQuery rather than re-write the bits that they need! – drewstiff Jan 09 '14 at 17:04