{"id":14255,"date":"2022-10-07T02:20:29","date_gmt":"2022-10-06T20:50:29","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/"},"modified":"2022-10-07T02:20:29","modified_gmt":"2022-10-06T20:50:29","slug":"solved-css-not-working-for-html-elements-created-in-javascript-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/","title":{"rendered":"[Solved] CSS not working for html elements created in javascript [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-34373040\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"34373040\" data-parentid=\"34372818\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>I can&#8217;t even believe<code>location.replace('javascript:page' + page + '()')<\/code> works, but I simply moved the css into the returned html and images were hidden.<\/p>\n<pre><code>function page1() {\n    return \"&lt;html&gt;&lt;head&gt;&lt;style&gt;.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}&lt;\/style&gt;&lt;\/head&gt;&lt;body class=\"heraldone\"&gt;&lt;script src=\"http:\/\/feed.informer.com\/widgets\/J9HBCBNMTQ.js\"&gt;&lt;\\\/script&gt;&lt;\\\/body&gt;&lt;\\\/html&gt;\";\n}\n\nfunction page2() {\n    return '&lt;html&gt;&lt;body&gt;Hello world (2)&lt;\/body&gt;&lt;\/html&gt;';\n}\n\nfunction nextpage(page) {\n    if (!document.image) {\n        location.replace('javascript:page' + page + '()');\n    } else {\n        location.href=\"javascript:page\" + page + '()';\n    }\n}\n<\/code><\/pre>\n<p>Not sure what you are up to, but I would have chosen to replace out the body content of the main html page, rather than whatever dark magic is allowing this to even work as intended. This would have the benefit of keeping the returned page html to be smaller, and easier to follow. Something like <code>var pages = ['&lt;script ... \/&gt;','Hello world']; document.getElementsByTagName('body')[0].innerHTML = pages[page-1];<\/code><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">7<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved CSS not working for html elements created in javascript [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] I can&#8217;t even believelocation.replace(&#8216;javascript:page&#8217; + page + &#8216;()&#8217;) works, but I simply moved the css into the returned html and images were hidden. function page1() { return &#8220;&lt;html&gt;&lt;head&gt;&lt;style&gt;.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}&lt;\/style&gt;&lt;\/head&gt;&lt;body class=&#8221;heraldone&#8221;&gt;&lt;script src=&#8221;http:\/\/feed.informer.com\/widgets\/J9HBCBNMTQ.js&#8221;&gt;&lt;\\\/script&gt;&lt;\\\/body&gt;&lt;\\\/html&gt;&#8221;; } function page2() { return &#8216;&lt;html&gt;&lt;body&gt;Hello world (2)&lt;\/body&gt;&lt;\/html&gt;&#8217;; } function nextpage(page) { if (!document.image) { location.replace(&#8216;javascript:page&#8217; + page &#8230; <a title=\"[Solved] CSS not working for html elements created in javascript [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\" aria-label=\"More on [Solved] CSS not working for html elements created in javascript [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333],"class_list":["post-14255","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] CSS not working for html elements created in javascript [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] CSS not working for html elements created in javascript [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I can&#8217;t even believelocation.replace(&#039;javascript:page&#039; + page + &#039;()&#039;) works, but I simply moved the css into the returned html and images were hidden. function page1() { return &quot;&lt;html&gt;&lt;head&gt;&lt;style&gt;.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}&lt;\/style&gt;&lt;\/head&gt;&lt;body class=&quot;heraldone&quot;&gt;&lt;script src=&quot;http:\/\/feed.informer.com\/widgets\/J9HBCBNMTQ.js&quot;&gt;&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;&quot;; } function page2() { return &#039;&lt;html&gt;&lt;body&gt;Hello world (2)&lt;\/body&gt;&lt;\/html&gt;&#039;; } function nextpage(page) { if (!document.image) { location.replace(&#039;javascript:page&#039; + page ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T20:50:29+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] CSS not working for html elements created in javascript [closed]\",\"datePublished\":\"2022-10-06T20:50:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\"},\"wordCount\":100,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\",\"name\":\"[Solved] CSS not working for html elements created in javascript [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-06T20:50:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] CSS not working for html elements created in javascript [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] CSS not working for html elements created in javascript [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] CSS not working for html elements created in javascript [closed] - JassWeb","og_description":"[ad_1] I can&#8217;t even believelocation.replace('javascript:page' + page + '()') works, but I simply moved the css into the returned html and images were hidden. function page1() { return \"&lt;html&gt;&lt;head&gt;&lt;style&gt;.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}&lt;\/style&gt;&lt;\/head&gt;&lt;body class=\"heraldone\"&gt;&lt;script src=\"http:\/\/feed.informer.com\/widgets\/J9HBCBNMTQ.js\"&gt;&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\"; } function page2() { return '&lt;html&gt;&lt;body&gt;Hello world (2)&lt;\/body&gt;&lt;\/html&gt;'; } function nextpage(page) { if (!document.image) { location.replace('javascript:page' + page ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/","og_site_name":"JassWeb","article_published_time":"2022-10-06T20:50:29+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] CSS not working for html elements created in javascript [closed]","datePublished":"2022-10-06T20:50:29+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/"},"wordCount":100,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/","name":"[Solved] CSS not working for html elements created in javascript [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-06T20:50:29+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-css-not-working-for-html-elements-created-in-javascript-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] CSS not working for html elements created in javascript [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14255"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14255\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}