How might I iterate over / access the properties of a referenced CSS file itself?
Hear me out, this may sound strange: I am currently wrapping the Google Maps API into some C# code (it outputs JavaScript); the Google Maps API, for things such as the Polygon class, appears to let you specify certain things like 'stroke-color' by passing in the appropriate value, but I can find no method for setting the classname for Polygon, nor immediately discover one for Polygon. So, since our HTML / CSS guy wants to skin stuff, I figured I'd use jQuery (.CSS()) or something to parse the CSS file, grab a defined property from within, and set the value in the JavaScript code.
Normally I'd set the color (for example programmatically, like so:
html.AppendLine("fillColor: '" + string.Format("#{0:X2}{1:X2}{2:X2}", fillcolor.R, fillcolor.G, fillcolor.B) + "',");
But I am trying to change it to something like this:
html.AppendLine("fillColor: $(\"Poly\").css(\"fill-color\"),");
And grab the property from a class in a referenced CSS file, defined like:
.Poly
{
stroke-color: #FF00FF;
fill-color: #FF00FF;
}
jQuery seems to want a defined element to grab CSS properties from...it does not appear to be grabbing the values directly from the CSS file (I could be wrong). The above code, unfortunately, results in 'undefined.' This may be because I am rusty with JavaScript, / CSS or it may be that the way I am attempting to access things is not correct.
Has anyone any ideas how I might accomplish my ends here?
Accessing JavaScript files is a little quirky. It behaves differently in each browser - you may try something like this:
document.styleSheets[0].rules[0].selectorText
The first index iterates over every stylesheet in the document, the second over each rule in this sheet.
There are some ways to access css property from a css file. They're a bit complicated.
Access CSS file contents via JavaScript
How do you read CSS rule values with JavaScript?
My solution for this case.
First, you create an empty div, which apply the selected css
<div class="Poly" id="dumbPoly"></div>
Then you select the div, get the css value property
html.AppendLine("fillColor: $(\"#dumbPoly\").css(\"fill-color\"),")
=============================================================================
You can set the div invisible by jQuery
$('#dumbPoly').hide();
Or set the style of the div
<div class="Poly" id="dumbPoly" style="display: none;"></div>
Related
I have HTML in a string and need to use C# to extract a particular node based on its CSS style. In the past, I've parsed HTML using HtmlAgilityPack. This parses the HTML very well, and gives me all the elements in an organized fashion. And I can even filter or query by attributes. The problem is that it doesn't "understand" how the CSS hierarchy works. CSS can be inline, at the beginning of the file, or in a parent node. The browser is intelligent enough to know what the final rendering of an element should be. HtmlAgilityPack can give me the attributes of a particular element, but I don't see a way for it to tell me what the ultimate style of the element would be. For example, an element might not have any attributes, but yet have a particular style based on the more complex CSS logic (style from a parent node, etc.)
How can I query the in-memory HTML, without using a headless browser, to find elements whose final rendering (were they to be rendered in a browser) would have a particular style? (Similar to how jQuery does it, eg: $('[color="#0000ff"]')
I don't want a lot of complicated regexs or similiar.
Thanks,
CSS (Cascading Style Sheet) use for the butterfly layout web application it's a one client site. A web page multiple CSS examples External, Internal, Inline use as user needed. Every CSS works the same goals but it maintains order. the higher order is the Inline CSS then Internal CSS and then external CSS we get it external file. Every CSS selector is not the same example id, class, adjoin, parent, sibling and others selectors. read this article https://css-tricks.com/precedence-css-order-css-matters/.
jQuery selector and CSS Selector are the same but jquery is work different way every jQuery CSS contain in Inline CSS. from your ask $('[color="#0000ff"]') is an a attribute selector. this html example are <div color="#0000ff">content</div> but it's not seticesfy W3C. it's also an custom attribute of an html element the W3C are recomended for custom attribute prefix data- example <div data-color="#0000ff">content</div> you got it http://html5doctor.com/html5-custom-data-attributes/.
--Thanks --
I have a generic html element like this
<span v-bind:class="{ available: days.timeOne }" data-time="10:00" data-date="{{ days.date }}" class="home__visit-featured-days-item-buttons-time">10:00</span>
Which when it is being rendered, is having the vuejs tags being stripped.
I have encountered this issue before when using basic html elements and even control tags like and my solution was to add them manually in the code behind. I don't like this method as not only is long and tedious, it ties back end logic to the view.
Is there a attribute similar to ClientIDMode that I can use to stop these tags being stripped?
ASP.NET webforms will strip out attributes for server controls (those with runat="server") when attributes contain colon (:) characters because these attributes cannot translate to class properties in the back end. However, non-server controls (i.e. raw markup) should just render as written into the ascx file.
Your example doesn't have a runat="server" attribute so I would expect it to render as written. If, however, it is a server control, could you just use raw markup instead?
If it must be a server control I think your only option is to add your attribute in the code behind as you mention e.g. myControl.Attributes.Add("v-bind:class", "{ available: days.timeOne }");
I suppose you are using the CK Editor for entering the HTML code. I wouldn't recommend that since it's WYSIWYG and not a code editor and does such things as stripping some part of the source. If you can, please move your code to Static text web part or to the layout directly. If you need to have it inside the editable region area, you can specify protected source for the CK Editor to let it know what code not to touch:
https://www.google.com/search?q=ckeditor%20protectedsource&rct=j
I am looking for a way to strip out all elements in the HTML doc that are hidden.
I am able to remove elements that contain style display:none or visible:hidden but what about those that are hidden because of their CSS class? Is there a way to look at say a DIV with class "item-description" and know that the stylesheet for this class contains display:none?
There is no way of knowing this with HtmlAgilityPack since it doesn't take into account the styles, only the DOM.
If you want to really be able to handle the styles after having loaded your html you must
parse the css (following all #imports and other tricks)
apply each rules to each DOM node by using the selectors
apply the inheritance rules to see what is hidden or not depending on the parent hierarchy and rules
resolve consistency problems (what if a component is visible but not its parent? How would that translate into your final document?)
I hope you decided on the browser you want to emulate, since some css rules will apply to specific browsers.
I also hope you don't have javascript that touches the DOM on the page...
I'm sure I'm forgetting some more things... Don't go there! There are grues!
If you really want to get this result in C#, perhaps embedding a rendering engine and then querying it through javascript would be a better way to do it.
OK, up front I need to say that I've been coding C# and .NET off and on since Wednesday a week ago. Just trying to figure out enough to fix some scripts provided by a 3rd party. So I'm flying blind here.
I've got a .aspx file (ie, prototype HTML) that contains some tags that need to be dynamically modified from the Page_Load method in the corresponding .cs file. I'd like to do the modification with minimal tear-up of the files involved.
The tags I need to modify are asp:Label, asp:ImageButton, and div. The first two I think I know how to modify, by referring to the IDs in the .cs and setting the associated attributes. But I can't find an "asp:" equivalent of div, nor any obvious way to modify it without that "asp:" equivalent. I could alternatively use a <style>, but I can't find any way to generate that into the HTML stream (though I see hints here and there). I have the Evjen/Hanselman/Rader ASP.NET book, but though it contains some stuff that seems headed in the right direction, that stuff uses HtmlTextWriter which doesn't seem to be the right interface for use in Page_Load.
So, any clues? I need primarily need to modify the style property inside the div.
You can just create an HtmlGenericControl by using
<div runat="server" id="something"></div>
in your code-behind
something.Attributes["style"] = "style it up";
The ASP.NET control equivalent would be an <asp:panel>, but depending on your version, panel used to (1.1) spit out <table>'s for certain browsers.
I am wondering if there is a way to detect from the server-side which DOCTYPE the page is specified as. I have some HTML and CSS in a custom WebControl that renders differently depending on which DOCTYPE the page is. Is there a Page property or a Response property I could check?
Why don't you have an enum or a boolean on your control that the consuming pages can set (it's not like the doctype should be changing from page to page)?
Thing is, DOCTYPE is a client side declaration and it doesn't take part the control structure of ASP.NET pages (because it exists outside the html element of the page). I concur with #TheCloudlessSky, pass the setting to the control, as the only way I can see you detecting DOCTYPE is by opening up the file itself and reading the first line, this is also pretty useless for compiled web applications too.
Why will the DOCTYPE be changing from page to page?
The DocType will not change from page to page, but you do sometimes need access to it. I am scouring the internet at the moment trying to get at this data.
I know it is there in first HTMLElement (DomElement.data) because it is properly listed in debug mode, but using something like -
dElementList[str].DomElement.data;
This seems to be the only place where the data I need to get at exists, the data inside
Is not posible. I suspect there is a cast needed to a specific element type, but I have not yet come across it. The MSDN example for DomElement does not access any of the elements, but their code is basically the same as mine, dElement is a Dictionary, str is the ID or tag of the element (in this case '!' from it's tag), the Dictionary returns a HTMLElement.
So does anyone know how we get at the at DomElement.data ?