{"id":273,"date":"2022-04-17T17:02:18","date_gmt":"2022-04-17T09:02:18","guid":{"rendered":"https:\/\/www.tunerli.com\/?p=273"},"modified":"2022-04-17T17:02:19","modified_gmt":"2022-04-17T09:02:19","slug":"css-configuration-via-javascript-1","status":"publish","type":"post","link":"https:\/\/www.tunerli.com\/index.php\/2022\/04\/17\/css-configuration-via-javascript-1\/","title":{"rendered":"CSS configuration via javascript 1"},"content":{"rendered":"\n<p>This time I try to change the padding and background color of a picture with javascript coding, like this below. The final result is when I drag the spacing button, the picture padding is changing as well, and if I change the base color, the picture background color is changed as well.<\/p>\n\n\n\n<p>The main two knowledge points I am going to practise are <code>Dataset JavaScript <\/code>and <code>addEventListener<\/code>.<\/p>\n\n\n\n<p>The dataset JavaScript, per the definition,  is a document-oriented module (DOM) property to access the data attribute and set it on the JavaScript element. It&#8217;s a DOM interface to set data elements to the application using JavaScript language. I have seen the usage of dataset quite a lot in online tutorials and others&#8217; projects but haven&#8217;t dug deeper on how it works and how it can be used to archive what I want.<\/p>\n\n\n\n<p>AddEventListener is another one that is used quite frequently in JavaScript, but what I have practised much is <code>click<\/code> event or some keyboard events. In this practice, I am using <code>change<\/code> event to get the result I want after the action is completed, and also <code>mousemove<\/code> event to make the change happening while I am dragging the button.<\/p>\n\n\n\n<p>Here are the two components that can be changed:<\/p>\n\n\n\n<p><code>&lt;input type<\/code>=<code>\"range\" min=\"10\" max=\"200\" value=\"10\" name=\"padding\" data-sizing=\"px\"&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;input type=\"color\" name=\"background\" value=\"#FFFF00\"&gt;<\/code><\/p>\n\n\n\n<p>and here is what I am using dataset and addEventListener to get what I want:<\/p>\n\n\n\n<p><code>const suffix = obj.dataset.sizing || ''; <\/code><\/p>\n\n\n\n<p><code>document.querySelector(\".img\").style.setProperty(obj.name, obj.value +`${suffix}`);<\/code><\/p>\n\n\n\n<p>It&#8217;s a very simple task but without the knowledge of these two points, it might be very hard. I have put the code into my <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/FuweiSun\/JavaScript-Practice\/tree\/main\/Dataset%201\" data-type=\"URL\" data-id=\"https:\/\/github.com\/FuweiSun\/JavaScript-Practice\/tree\/main\/Dataset%201\" target=\"_blank\">Github<\/a> (again I am new to Github as well and I am thinking it might be worth spending some time and effort on that as well as there are so many resources for developers and is quite a good place to store codes) as a reference to compare between when I am learning these new concepts freshly and when I get quite familiar with these common concepts with JavaScript coding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"697\" src=\"https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display.png\" alt=\"\" class=\"wp-image-274\" srcset=\"https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display.png 835w, https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display-300x250.png 300w, https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display-768x641.png 768w, https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display-575x480.png 575w, https:\/\/www.tunerli.com\/wp-content\/uploads\/2022\/04\/display-100x83.png 100w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This time I try to change the padding and background color of a picture with javascript coding, like this below. The final result is when I drag the spacing button,<a href=\"https:\/\/www.tunerli.com\/index.php\/2022\/04\/17\/css-configuration-via-javascript-1\/\" class=\"more-link\"><span class=\"more-button\">Continue reading<span class=\"screen-reader-text\">CSS configuration via javascript 1<\/span><\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[15,12],"class_list":["post-273","post","type-post","status-publish","format-standard","hentry","category-technical-issues-and-resolutions","tag-javascript","tag-learning"],"_links":{"self":[{"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/posts\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":3,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"predecessor-version":[{"id":277,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/posts\/273\/revisions\/277"}],"wp:attachment":[{"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tunerli.com\/index.php\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}