操縱和香草的JavaScript

所以我試圖做一些研究，關於這個主題的一個項目，我會做編輯預定CSS變量和我想通爲什麼不能得到一些真實的javascript大師:)操縱和香草的JavaScript

一些反饋我需要創建一堆「css，js，html」模板，這些模板將全部內聯在一個頁面中，並通過客戶端上已建好的系統注入到網頁中。我所要做的就是製作諸如「font-size」，「color」，「background-color」，「img [src]」和「a [href]」等可編輯的東西，所以我需要爲這些參數創建變量然後讓他們通過香草JavaScript來控制。

我想知道什麼，並從中獲得反饋是什麼將是最好的方式去做這個使用香草JavaScript？

任何幫助或反饋將不勝感激！

謝謝

來源

2014-01-09 user2517626

請記住，我不能使用Jquery，sass，less或其他任何框架。 – user2517626

雖然這是可能做到這一點香草的JavaScript，我建議你不要嘗試。訪問頁面樣式表的API是...呃...可能會更好？

看到這些問題的一些想法如何從JavaScript操作樣式表：

接下來，我會建議您的服務器插入代碼，加載到框架操作樣式表。之後，您應該加載第二個腳本，該腳本使用框架來操作樣式。

但是在一天結束時，在服務器上查看SASS或LESS可能會更簡單，可以使用功能強大的元語言編譯CSS，從而允許您使用變量。

來源

2014-01-09 16:18:40

嘿感謝回答，但我不能使用任何框架或sass，因爲它必須內聯，並能夠內聯運行..變量可能需要在頁面頂部，然後內聯CSS，然後HTML，聲明，然後JavaScript在頁面底部..類似的東西..這將是一個小模板，然後將被注入到一個頁面。這些模板將由客戶自己定製，以供他們的公司顏色和標誌使用，而不是。 – user2517626

在這種情況下，您應該爲每個客戶建立一個SASS文件，並將servlet或服務映射到URL'customer.css'，該文件在運行時從SASS文件生成。由於文件沒有更改，因此您可以在第一次請求進入時執行一次轉換，或者在爲客戶構建應用程序時進行靜態轉換。 –

我說得對理解本如下：

用戶將在頁面上編輯的字段，如「FONT-SIZE：」你想要的頁面，按照他們輸入的內容動態改變？

如果是這樣，我認爲你需要探索的第一件事是jQuery。 jQuery提供了一些方法，使您可以即時更改CSS（例如字體大小或背景色）。您可以使用它在特定事件上執行這些方法，例如點擊提交按鈕。

所以你必須像

//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());

當我使用$（「＃東西」）以上，這是一個jQuery選擇以找到您所設定的ID爲「任何HTML元素東西」，例如提交按鈕，我們設置其ID這樣的：首先創建按鈕時，在我們的HTML頁面上：

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

，然後我們可以‘找到’它使用jQuery選擇我們的JavaScript使用：

var myButton = $('#button_submit');

我已經留下了大部分相關的和任何其他jQuery/CSS更改（在背景顏色之後）供您使用，但是應該將您引向正確的方向。

來源

2014-01-09 16:34:19 drewstiff

嘿感謝回答..我知道jquery和相信我，我很樂意使用它，但我們不能有任何框架。它必須在香草javascript中完成，這就是爲什麼我想嘗試並找出最佳解決方案，因爲通常我只會使用jquery。 – user2517626

@ user2517626好的。在這種情況下，你必須以艱難的方式來完成這一任務，這需要我進行儘可能多的研究，因爲它會讓你感到抱歉，我無法進一步幫助你。這絕對有可能，因爲jQuery是用JS編寫的，所以如果在jQuery中有可能，那麼它就可以在JS中實現。但大多數人只會使用jQuery而不是重寫他們需要的位！ – drewstiff

操縱和香草的JavaScript

回答

相關問題